CxD Archive
Code: Trivia App
Code: Trivia App
  • About
  • Prerequisite Knowledge
  • Code Template
    • Template Build Tutorial
      • 1. Screens as Containers
      • 2. Welcome Screen
      • 3. Question Screen
      • 4. Thank You Screen
      • 5. Core JS Functions
      • 6. Load Questions and Go
      • 7. Respond to Answer Clicks
      • 8. Finishing the Game
      • 9. Visual Enhancement
    • Managing the Question DB
  • More
    • Code Mod Examples
      • Style Changes with CSS
      • Support True/False Questions
      • Add "Next Question" Button
      • Add a Category Selection Screen
      • Add Sound Effects on Answer Clicks
      • Add Basic Scoring
      • Add a Question Timer
      • Add a Question Timer with Pause Button
      • Custom Feedback Text for Individual Questions
      • Use Images with Questions
      • Display the Total Question Count at Welcome
      • Add Background Animation
    • Trivia JS Library Reference
    • P5.js
    • ★ Trivia Project Guidebook
Powered by GitBook
On this page
Export as PDF
  1. Code Template
  2. Template Build Tutorial

4. Thank You Screen

HTML for Thank You Screen Content

Below you see that we are updating the thank you screen much like your welcome screen, but you will definitely want to put some game results here later instead of saying, "Looks like you did pretty well." The id called "game-results" will help us easily insert the game results later.

Update your thank you screen HTML to match the code below.

HTML
<!-------------- THANK YOU SCREEN --------------->
<div class='screen' id='thankyou-screen'>
  <h1>Thanks for playing our game!</h1>
  <h4 id='game-results'>Looks like you did pretty well.</h4>
  <button class="start-btn">Restart</button>
</div>

Again, no additional CSS to add.

Previous3. Question ScreenNext5. Core JS Functions

Last updated 6 years ago