One popular method to get your students to learn is to categorise things or to put them in order. Here, we’re going to look at making a card sorting game, which could be used for both.
This is the web app we’re going to make:
The code
There are two parts to the code, stored in two files:
1) Script file – “doGetPC” – Apps script to get the card information from a Google Sheet and then make the cards
2) HTML file – “webpagePC” – HTML which will style and allow the cards to be moved.
Code 1
1. //DYNAMIC SET OF CARDS
2. function doGet(e) {
3. const ss = SpreadsheetApp.getActiveSpreadsheet(),
4. shSheet = ss.getSheetByName('SHEET'),
5. sheetNo = shSheet.getRange(1, 2).getValue(),
6. sh = ss.getSheetByName(sheetNo),
7. rowData = sh.getRange(2, 2, sh.getLastRow() - 1).getValues();Line 2: Set up the doGet() function which will allow us to run this as a web app.
L3-4: Get the data from the Google Sheet, from the tab called “SHEET”.
L5: Get the sheet number.
L6-7: Get that sheet and get the rows of data, except the first header row.
9. //Make page
10. var html = HtmlService.createTemplateFromFile("webpagePC");L10: Get the HTML template from the webpagePC file and store it in the variable html.
12. html.cards = rowData.map((card) => {
13. return '<li>' + card + '</li>'
14. }).join('');L12: Let’s give the html object the property cards which will contain the row data in HTML form. First, we need to loop through that row data to get each statement, so we use the map function to do that. Note, here I’m using the new arrow function, so make sure you’re using v8.
L13-14: Here we return a HTML list of the statements (the data in our sheet rows). We join it all together to make one long piece of HTML, so that the cards property contains all of the content of the list.
16. var html = html.evaluate().setSandboxMode(HtmlService.SandboxMode.IFRAME);
17. return html;
18. }L16: We then need to evaluate the html object and set the sandbox mode.
L17: We return the html.
Code 2
Now let’s go through the HTML file. Here, we’re going to use a Bootstrap library for styling, and JQuery to deal with the animation. We’re also going to use some CSS to style our cards and page.
1. <!doctype html>
2. <html lang="en">
3.
4. <head>
5. <meta charset="utf-8">
6. <meta name="viewport" content="width=device-width, initial-scale=1">
7. <base target="_top">L1-7: Here we set up some of the basic page settings.
8. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css"
9. integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
10. <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
11. <link rel="stylesheet" href="/resources/demos/style.css">L8-11: Here we add the Bootstrap library and JQuery CSS one.
Bootstrap library can be found here.
JQuery libraries can be found here.
13. <style>
14. #sortable {
15. list-style-type: none;
16. padding: 2px;
17. }L13-17: First let’s set up the styling for the ID “sortable”. Basically, here I don’t want bullet points, so I set up list-style-type as “none” and also give it a little bit of padding.
19. #sortable li {
20. border: solid 2px;
21. color: black;
22. background-color: yellow;
23. padding: 10px 0px;
24. text-align: center;
25. text-decoration: none;
26. font-size: 24px;
27. margin: 2px 2px;
28. cursor: pointer;
29. box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2),
30. 0 6px 20px 0 rgba(0, 0, 0, 0.19);
31. width: 100%;
32. height: 25%;
33. border-radius: 5px;
34. position: relative;
35. }L19-35: Next we style the cards in the list.
37. #title {
38. padding: 5px;
39. }
40. </style>L37-40: Here I’m just adding a little padding to the title (instructions).
41. <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
42. <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>L41-42: Here we add 2 more JQuery libraries which we will use for the card animation.
43. <script>
44. $( function() {
45. $( "#sortable" ).sortable();
46. $( "#sortable" ).disableSelection();
47. });
48. </script>
49. </head>L43-49: In the script tags we add the JQuery to make the cards movable (sortable). As you can see it’s really easy to do, just a couple of lines and this makes our cards sortable.
51. <body>
52. <div id="title">Order the cards from smallest to largest</div>
53. <div data-role="content">
54. <ul id="sortable">
55. <?!= cards; ?>
56. </ul>
57. </div>
58. </body>
59.
60. </html>L51-54: Now, we need to add the content to the page. First, I’ve added an instructions line. Then we need to give the Div a data role and the unordered list the ID to style it.
L55: In the scriptlet tags we add the cards property, which will add the content of the cards.
L56-60: We close of the tags.
We’re now ready to deploy it as a web app.
In the editor, click on the blue Deploy button and then “New deployment”.
By default, the type of deployment will be a web app, which is what we want. Enter a description of this version of the app.
By default, the type of deployment will be a web app, which is what we want. Enter a description of this version of the app.
To save anyone having to authorise the script or having to log in, I’m going to run it from my account, and give anyone access to the app.
You will need to authorize the script. Click on “Authorize access”. Click on the account you want to use.
Click “Allow” to authorize the script.
It’ll then show you a confirmation message and the URL to open your web app. Copy and paste that into your browser.
Running the web app
On the Google Sheet, there are lots of numbered sheets, each one has a set of cards.
On the SHEETS tab, type in the sheet you want to use.
Here, I’ve shorten the web app URL using the bit.ly service, just so it was easier to share with my students.
Open the link and you’ll be able to move the cards around.
Click here to make a copy of the file containing an example and the code.
Note, this only works on computers and not on mobile devices.
For that extra code is required, which I have included in the file above. Use the files doGetMOB and webpageMOB. You’ll need to comment out the doGetPC code as it has the same function name as the mobile version, i.e. doGet().
You can use it to order cards and I also use it to get students to put cards in categories. There’s an example in the file.
Have fun!
Want to learn more about Google Workspace and Apps Script? The books below are available on Amazon. Just click on a book! (Affiliate links).
a
