Gamified teaching content | ARCS motivational strategies | Gamified teaching activities | |
Teacher activities | Student activities | ||
CSSBattle #1 and the CSS language | R2 | When the video imported by the class is finished, the teacher explains the code language one by one: 1) Tag selector in CSS style: you need to < style > < /style > add < body > a tag selector in the middle to set the style of the main part of the web interface;
2) Add the background tag < body > in the tag selector and set the color to #5d3a3a so that the background color of the design page will be consistent with the background color of the landing page;
3) < body > Add margin tags to the label selector and set the value to 0; that is, the outer margin is 0 for the top, bottom, left and right;
4) Change the width value in the label selector to 200 px and the < div > height value to 200 px; through the height and width settings, the rectangle in the middle will take on the current shape;
| Students further understand the operation process according to the teacher’s step-by-step explanation and the one-to-one correspondence between code language and web page renderings. If you have questions during this process, you can raise your hand, and the teacher will answer them patiently. |
5) Change the < div > background value in the tag selector to #b5e0ba so that the rectangle in the middle part shows the current color;
6) Finally, click the submit button in the interface to submit the work; you can get the current work score. The teacher will record the score of everyone’s work as a scoring record of the usual grade.
|