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. More
  2. Code Mod Examples

Display the Total Question Count at Welcome

In this simple mod we will let the player know at the welcome screen how many questions are in the database using the trivia.totalQuestions value that automatically counts the questions for us.

1 - Modify your welcome screen HTML like on line 4 below, where the id="question-count" was added.

HTML
<!-------------- WELCOME SCREEN --------------->
<div class='screen' id='welcome-screen'>
    <h1>Welcome to our example game!</h1>
    <h4 id="question-count">You have questions waiting for you.</h4>
    <button class="start-btn">Start</button>
</div>

Now we will insert the trivia.totalQuestions value into a sentence to be placed in the element with id="question-count".

2- Add the code on line 4 below to the end of your displayWelcome() function in your JavaScript.

JavaScript
function displayWelcome() {
  $(".screen").hide();
  $("#welcome-screen").show();
  $("#question-count").html(`You have ${trivia.totalQuestions} questions waiting for you.`);
}

That's it. Try it out.

PreviousUse Images with QuestionsNextAdd Background Animation

Last updated 6 years ago