How to make a simple ladder card game web app

HOW TO PLAY

SO HOW DO WE MAKE THIS?

1. function doGet(e) {
2. const ss = SpreadsheetApp.getActiveSpreadsheet(),
3. shSheet = ss.getSheetByName('SHEET'),
4. sheetNo = shSheet.getRange(1, 2).getValue(),
5. sh = ss.getSheetByName(sheetNo),
6. rowData = sh.getRange(2, 1, sh.getLastRow() - 1, 2).getValues();
8. //Make page
9. let html = HtmlService.createTemplateFromFile("webpage");
11.  html.questions = rowData.map((question, n) => {
12. return '<div><button id="' + n + 'q" class="cards show qColour">'
13. + question[0] +
14. '</button></div><div><button id="' + n + 'a" class="cards hide aColour">'
15. + question[1] +
16. '</button></div><br><br>'
17. }).join('');
19.  html = html.evaluate().setSandboxMode(HtmlService.SandboxMode.IFRAME);
20. return html;
21. }

HTML

1. <!DOCTYPE html>
2. <html>
3.
4. <head>
5. <base target="_top">
6.
7. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css"
8. integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
9. </head>
10. <style>
11. h1 {
12. font-size: 30px;
13. text-align: center;
14. }
15.
16.  .cards {
17. border: solid 2px;
18. color: black;
19. padding: 30px 20px;
20. text-align: center;
21. text-decoration: none;
22. font-size: 30px;
23. margin: 4px 2px;
24. cursor: pointer;
25. box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
26. width: 99%;
27. height: 25%;
28. border-radius: 5px;
29. position: relative;
30. }
32.  .qColour {
33. background-color: yellow;
34. }
35.
36. .aColour {
37. background-color: orange;
38. }
40.  #divContainer {
41. margin-left: 5px;
42. }
44.  .hide {
45. display: none;
46. }
47.
48. .show {
49. display: inline-block;
50. }
51. </style>
53. <body>
54. <h1>Ladder Game</h1>
55. <div id="divContainer">
56. <?!= questions; ?>
57. </div>
58. </body>
59.
60. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
61. <script>
62. //Change card when tapped
63. $(document).ready(function(){
64. $("button").click(function(e){
66.     var id = this.id;
67. var suffix = id.substr(-1);
68. var qNo = id.substring(0, id.length - 1);
70.     if(suffix == "q"){
71. $("#"+id).hide();
72. $("#"+qNo+"a").show();
73. }
74. else if(suffix == "a"){
75. $("#"+id).hide();
76. $("#"+qNo+"q").show();
77. }
78. });
79. });
80. </script>
81.
82. </html>

DEPLOY THE WEB APP

--

--

--

Author of books on Google Workspace and Apps Script — Available on Amazon

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Web Components Q&A

How I extended ImageView to include elevation shadow.

An Implementation of Double Linked Lists

Best Practices For Inline Style In React.Js

Understanding Redux

The Angular template variable you are missing — Return of the VAR

Flatiron Phase 2: Sinatra Project

Practice OOP to front-end universal state module with Redux/MobX/Vuex

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Baz Roberts

Baz Roberts

Author of books on Google Workspace and Apps Script — Available on Amazon

More from Medium

MEAN Stack — A Popular Choice for Web App Development

Web Application Development

Code and Content Sharing Made Simple via Tools and Web Apps

Learn How To Create A Module Magento 2 ! — MyWebDiary |