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
  • HTML
  • Javascript
Export as PDF
  1. More
  2. Code Mod Examples

Add Basic Scoring

PreviousAdd Sound Effects on Answer ClicksNextAdd a Question Timer

Last updated 6 years ago

The following example code demonstrates how to add basic scoring to your trivia game.

HTML

Add an HTML element with a unique id that will display the score. For example, you could place the following example to the top of the question screen.

<h1 id="score">-</h1>

Javascript

Next you will need to update the score presented on the screen at the appropriate time. For starters, place the following line of Javascript inside the curly braces { } of the onClickedAnswer() function code block. Placing it at the top of the code block is a good place.

$('#score').html(`${trivia.totalCorrect} of ${trivia.totalAnswered} Correct`);

That's it, but you will likely want to customize how the score is presented. You could also add the core to the thank you screen in a similar way.