Building on the knowledge of the front end development principles kids stretch their thinking by applying javascript to interact with local storage thus enabling to confidently handle the entire spectrum of layers from local disk drive to browser based application/games
Class ADV-C90
Class time 55 mins
Goal ● Write JS code for the game login page to build the game page for the multiplayer game.
Resources Required
● Teacher Resources ○ Use gmail login credentials ○ Earphone with mic ○ Notepad and Pen
● Student Resources
○ Use gmail login credentials ○ Earphone with mic (optional) ○ Notepad and Pen
Class structure Warm Up Teacher-Led Activity Student-Led Activity Wrap Up
5 Mins 15 Mins 35 Mins 5 Mins
Start the video call from H2H
Class Steps Say Do
Step 1: Warm up (5 mins)
In the last class we learned what local storage is, how to view the data stored in local storage and how to save the data locally. We also learned how to redirect to another page.
4. Let the student write the JS code for game_login.
5. Let the student write the HTML code for the game_page.
6. Let the student write the HTML and JS code for activity2.
Teacher Initiates Screen Share
Step 2: Teacher-Led Activity (15 mins)
Let's continue building the multiplayer game. We are done with the HTML code for the game login page, now we will write it’s JS code to add some behaviour/functionality and interaction to the webpage .
Run Teacher-Activity-1 and just demo the login page with showing the local storage.
In the last class we made a button in HTML and assigned it an onclick addUser() function.
When this button is clicked we are storing the player names in local storage, and redirecting to a different page. Note for teacher: Ask Student to download game_login.js file from student activity 2 and put it inside guess_the_word_game folder which has been downloaded by the student in the last class. And start coding inside the game_login.js.
Don’t worry about this, as game_page.html is not yet created and that’s why it will show like this. Proceed with the class and let the students know that this will be fixed as we move forward with the class. Great! We are done with the code of the first page that is the login page of the game. Now let’s start with the HTML for the second page that is the main page of the game. Note for teacher: Ask student to download game_page.html from student-activity-2 and put it inside guess_the_word_game folder which has been downloaded by the student in the last class. And start coding inside this file.
4. Now we will add an h3 tag to hold the player name who has the turn to answer the question.
● This h3 tag has an id that will be used to update this element with the player name who has the turn to answer the question.
5. Now we will add a div that will be used to hold the word that we enter, an input box for the answer, and a button to check the word. This is how it should look:
● This div has an id that will be used to update this div with the word, input box, and the check button. We will see how this is done in the next class.
● This div also has a bootstrap class col-lg-6 . Q - According to you what is the purpose of using the col-lg-6 bootstrap class at this instance? A - col-lg-6 bootstrap class is use to set the width of this div to 50% of the screen
6. Now add 2 br tags after this div, so that there is enough space between div element and elements below it.
7. Now add an input box, which will be used to write the word which the questioner wants to ask.
● This input box has an id, this id will be used to refer to this input box and get the value from it.
● It has the form-control bootstrap class which will add padding, margin, and border to the input box.
● It also has a placeholder which is like HINT of the text box. 8. Now add a br tag after this input box, so there is enough space between the input
element and button element. 9. Then we have a button that will be used to get the word from the input box, and
add to the div that has id="output".
● This button has an onclick function send(), that will be used to get the word/value from the input box, manipulate the word (which means removing some words) and then displaying it in the div that has id="output". We will discuss this function in the next class.
● This button has bootstrap class btn and btn-success, which we already know.
● Also we have given an inline style of width 30% to this button. Great! We are done with the HTMLcode for game_page. Now we will do the practice activity 2.
1. Note for teacher: Run teacher-activity-4 and press the update score button
to show the student how the score gets updated in the
● And you will be redirected to the Activity 2 page.
5. In the Activity 2 page press get score button -
● As you press the button, an h1 tag will be added above the get score button
like this - ○ So this button gets the score value from the local storage ,creates a
h1 element and displays the score in h1 element.
6. Then press the back button , it will redirect you to activity 1 page. Now we will code for this activity - Note for teacher: Ask the Student to download activity_2.html and activity_2.js from student-activity-2 and put it inside the practice-activity folder which has been downloaded by the student in the last class. HTML code given to the student for activity_2.html:
● Bootstrap class ‘btn-success’ - this class will add light green color
background and border.
3. Now add an onclick back() function to the Back button.
Great! Now we will write javascript code for practice activity2. Note for teacher: The student needs to write the javascript code in activity2.js which the student just downloaded.
1. First we will write the back() function.
● Define the function ● The back button is used to redirect back to activity_1.html. So we will write
the code for redirecting back to activity_1.html as follows:
*Note: Please follow the following steps. *Note: Allow the student to copy and paste if the code is repeated.
1. Ask The student to download game_login.js from student-activity-2 and put it inside guess_the_word_game folder which has been downloaded by the student in the last class.
2. And write the javascript code for game_login page in game_login.js
3. Ask The student to download game_page.html from student-activity-2 and put it inside guess_the_word_game folder which has been downloaded by the student in the last class.
4. game_page.html has some HTML code and the student needs to complete it.
5. Ask the Student to download activity_2.html and activity_2.js from student-activity-2 and put it inside the practice-activity folder which has been downloaded by the student in the last class.
6. activity_2.html has some HTML code and the student needs to complete it.
7. The student need to write the whole javascript code in activity_2.js
Student-Activity-1 CODE DIAGRAM Student-Activity-2 SOURCE CODE Student-Activity-3 BOOTSTRAP BUTTON REFERENCE Student-Activity-4 JS REDIRECT REFERENCE Encourage and help the student if the student gets stuck.
Keep the code files safe as we will be uploading these file on github when we complete building this website
Teacher Guides Student to Stop Screen Share
Step 4: Wrap-Up (5 mins)
You did great today as well. Great! You have 2 hats off Q - Bootstrap class btn btn-success adds what to the element ? A - It adds light green border color and light green background color to the element. Q - Which function is used to get the value from localStorage ? A - getItem()
(Give at least 2 hats off) Press the Hats Off Icon for Creatively Solving Activities
Press the Hats Off Icon for Great Question
Press the Hats Off Icon for “Strong Concentration..”
