Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Now you will update your welcome screen HTML slightly by adding a <button> element and an h4 element. The button will start the game after we add more code later. Later you can customize your welcome message and even add some specific data about the trivia game.
Update your welcome screen HTML to match the code below. (Don't add another welcome screen!)
Add the following CSS styles to the bottom of your stylesheet for buttons and headings. Modify styles as you wish, but be careful about the effects of changing display, margin, and width , which can be problematic sometimes.
Below you see the HTML for the three screen "containers" as <div> elements. We will add more detail to each screen later. Notice that each screen has class='screen' . This will allow us to easily change the style (CSS) of all three screens later in the same way. Also, notice that each screen has a unique id that will allow us to target each screen in a particular way later.
Copy the HTML code and paste it into a new index.html file, or use the CodePen version if you are starting with CodePen's HTML. The browser page preview is not exciting, but it should contain text from all three screens.
What is a single page web app? Most traditional web sites are a collection of HTML files (pages) that link to each other. With a single page web app you will create a single HTML file that contain different views (we call them screens in our case) that you hide or show depending on the state of the app.
For example, in the trivia game, you will hide the question and thank you screens at the beginning and show the welcome screen. When the visitor starts the game, you will hide the welcome screen and show the question screen, and so on.
Don't worry if this isn't totally clear yet. It will make more sense when we get to the JavaScript programming part later.
Let's add a little style to our screens next. In the code below notice how the body , which contains all contents of the page, is given a background color of "gray" and a margin of "0". This gives us a nice edge-to-edge background for placing our screen content.
Next you will see several styles being applied to screens, since .screen affects all elements with that class. Notice how background-color uses rgba( ) so that we can "see through" the screen a bit to the background. You will want this feature later. The rest of the styling has to do with sizing the screens and content in a way that fits nicely on any device, and you will probably want to leave these elements alone.
Copy the CSS code below into your style.css file and notice the change. You will need to scroll down in the live preview to see all the screens now.
Familiarity with the following concepts are highly recommended before programming the trivia game. But mastery is NOT required.
Common HTML Elements and the basic tag syntax <div>, <h1>, <h2> (etc.), <button>, <span>
Nesting elements
id and class attributes
CSS
Selectors for elements, classes, and ids
Common properties used in styles: background-color, color, font-size, margin, padding, height, width, display, border, etc.
JavaScript
Variables - numbers, strings, objects
Functions
Conditionals -- if, else
jQuery selectors for elements, classes, and ids
Basic jQuery functions: $.show(), $.hide(), $.html()
This is the reference documentation for the iDEW Trivia library and template (see GitHub Repo).
Just getting started? Start with the Template Build Tutorial. or jump to the template Quick Start. Here is a live example of the basic template. Yeah, it is boring. It is up to you to make it interesting.
Copyright © 2015-2018 Jim Lyst and Michael Frontz, Indiana University School of Informatics and Computing at IUPUI
This material is part of the Computing by Design high school computer science curriculum developed for the Informatics Diversity-Enhanced Workforce (iDEW) program, an award-winning community partnership in central Indiana that is broadening student participation in computing and helping students develop the skills essential for success in the 21st century workplace. The iDEW program is managed by the Indiana University School of Informatics and Computing at IUPUI.
This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License. You are free to use, share, or adapt this material for non-commercial purposes as long as you provide proper attribution and distribute any copies or adaptations under this same license.
Take a look at the code below and carefully review the nested elements in this block along with the classes and ids used. The <div> with an id = "answer-set" encloses the four answer buttons to help with shuffling answers later on. We wouldn't want the correct answer to always be on top, would we? :) Also, notice the <div> with id = "feedback" that can be used to give a player feedback after answering.
Update your question screen HTML to match the code below.
No additional CSS needed for the question screen, since we already added style for buttons and the screen class. Yea!
You will come across bits of code that use the iDEW trivia library -- for example, trivia.loadGoogleSheet( ) , trivia.insertQuestionInfo( ), trivia.totalQuestions. These methods and trivia values were designed to make programming your game easier. Once you dig in to your own game design you will want to review all the goodies offered in the Trivia Library Reference section of this book.
Update your setup ( ) function to match the one below that loads the example question database. You will eventually change the googleSheetLink value to your own. Notice that once the questions are loaded (see .then in code) the displayWelcome ( ) function is called.
Note: The updated Google Sheet Link (as of August 30, 2021) used above works with the latest Trivia Library release (1.2.0 +).
Update your displayWelcome( ) function to match the one below. This function first hides all screens, since they are all of class "screen". Then, only the welcome-screen is displayed using it's unique id.
The onClickedStart( ) function is called by the Trivia library when a button of class "start" is clicked, like the one in your welcome screen HTML and thank you screen HTML. Here we simply call the displayQuestion( ) function. You may add more code here later for additional game features.
Update your onClickedStart( ) function as below.
Below the displayQuestion( ) function hides all HTML screen then displays only the question screen. Then the question info (category, question, and answers) are inserted into the question screen HTML using a method from the Trivia library. The answers are then shuffled for obvious reasons. Update your displayQuestion( ) function to match.
Update your displayQuestion( ) function as below.
Test your code. Your game will get stuck at the first question, but we will address that next.
In the code below the script tags load that make coding your game much easier. To all the people that work on free and open source projects, thank you!! You are adding the , , , and the iDEW trivia libraries here.
Add the code below to the bottom of your HTML body. (Place just before the tag for your custom JS code<script src="script.js"></script> if needed.
We are assuming you don't want your trivia game to be a static page and make people scroll down the screen just to see a trivia question. That's where JavaScript comes in to give you control of how the trivia game interacts and displays content when and where you want.
setup( ) This function runs once when the visitor first comes to the page. For example, we will load the question database here.
displayWelcome( ) , displayQuestion( ) , displayThankyou( ) These functions control what is displayed for each of our screens.
onClickedAnswer( ) , onClickedStart( ) These functions control what happens when buttons are clicked.
Copy the JavaScript below and paste it in a new script.js file. Nothing new will happen just yet. That's next.
The onClickedAnswer( ) function is called by the Trivia library when a button of class "answer-btn" is clicked. In the code below you will notice that a parameter, isCorrect, is "passed" to the function to indicate whether the answer is correct or not. Based on the answer we will provide appropriate feedback by inserting text and showing the "feedback" HTML element. We will also highlight the correct answer by adding a "highlight" class to the correct answer button. Finally, we will wait 3 seconds then use the trivia library method to gotoNextQuestion. Update your function to match the one below.
In order for the button highlight to work you need to add the following to your CSS. Add this to the bottom of your CSS.
If you run your trivia now the first question should respond nicely to a clicked answer, but you will notice a couple of problems once you get passed the first question. The highlight is stuck on and the feedback is not cleared. Let's fix that by adding two lines of code to your displayQuestion( ) function.
Add the code below just after $("#question-screen").show(); inside your displayQuestion( ) function. This resets your feedback.
Your trivia game should be clipping along well now. The final piece is to handle what happens when all questions have been answered.
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.
Again, no additional CSS to add.
There are three screens in the core game structure. While it may seem simple, you will find that there are many creative and engaging things you can do in your customized design.
Welcome Screen The welcome screen can simply welcome the visitor to the game and give some background on your game. It will display a start button to take the visitor to the first question. You can optionally include some basic metrics about the game, like how many questions await them.
Question Screen The question screen is the most important screen. In that it not only presents the trivia questions to the visitor, but also will display feedback on correct and incorrect answers. The question screen can also include running data; like a score, progress, or timer.
Thank You Screen The thank you screen will gracefully inform the visitor that they have finished the game. This screen can provide additional data, like how well they played the game, and provide a button to play it again.
The code template is built with HTML/CSS/Javascript. The custom question database can be directly included as a Javascript object array or created in a connected Google Sheet. Creating the database in a Google Sheet is most convenient and much easier to edit.
The series of exercises covers HTML/CSS/JS and some informatics practices.
HTML - , ,
CSS - , ,
JavaScript - (JS) / (jQuery), (JS)/ (jQuery), (JS) / (jQuery)
This tutorial simply builds the code template step by step to help you understand how it works. Go to 1. .
In order to display basic True/False questions, simply add the following CSS to your stylesheet. :empty identifies answer buttons that have no content and hides the element using display: none
In your Google sheet table simply put the correct answer (whether "True" or "False") in the correct answer column and the incorrect (whether "False" or "True") in the first incorrect column. Leave the remaining two answers blank.
Likewise, you could have questions that offer only 3 multiple choice answers.
Let's include a function that will enable you to create fancy animations later. Add the following function just after your setup( ) function. Examples of how to add visual effects to your trivia game are available in the code examples section, but for now we will simply change the background color.
You will also need to add the following code to the end of your CSS.
You should now see that the screen’s background color changes based on the current state of the game.
Below are some basic style changes you could use to update the look of the trivia app. With CSS, the possibilities are nearly endless. Just look at this CSS reference at w3schools. It is easy to just try things out by trial and error. Most styles have several options to consider. So, as needed, do a Google search for "CSS" followed by a simple description of a style you are interested in, and you will likely find some answers.
In your style.css file try changing or adding the following background properties to different elements in your trivia game,--like the body, .screen, or button CSS selectors to see the result.
Notice that there are many ways to define colors.
Want to get a unique font? Try Google Fonts. Hint: If you find a font you like, click the "+" for the font family then click the "family selected" bar at the bottom of the page to see instructions.
Once all questions are answered the trivia library will call your displayThankyou( ) function. Notice how the game results are also displayed in this function. Your thank you screen HTML provides a restart button that will allow the player to play again. Update your displayThankyou( ) function to match the one below.
Your core trivia game code should work from start to finish now.
The information on this page is in development and is provided for advanced use of the library.
Used to load a question bank from a Google Sheet.
Returns all category names in an array.
Returns category names of the categories having unanswered questions. Returns as an array.
Advances the trivia game to the next question.
This function places a button for each category into the HTML.
This function puts the current question and answers taken from your database into the HTML to be displayed.
This function shuffles the multiple choice answers so that the correct answer does not always show at the top.
This function simply starts the event listeners for different types of player clicks.
This is an array of the trivia question objects.
This is the current trivia question object which contains key/value pairs defined by the question database. For example, trivia.currentQuestion.category will contain the category label for the current question if it is available. The standard question object keys are below, but can be extended as needed.
category
question
correctAnswer
incorrectAnswer1
incorrectAnswer2
incorrectAnswer3
This provides the current question's index in the questions array.
The provides the total questions in the game.
This provides how many correct answers the player has at the moment.
This provides how many questions have been answered by the player at that moment.
This provides the state of the game. Possible states -- 'welcome', 'question', 'correct', 'incorrect', and 'thankyou'.
Copy the HTML/CSS/JavaScript below to get started immediately.
In the menu to the left you can find a list of example code modifications you could make to the trivia game.
⚠️ Important update to instructions posted August 30, 2021.
Login to Google Drive.
Go to this spreadsheet.
Create your own copy of the spreadsheet by selecting File > Make a copy....
Now publish your copy of the spreadsheet by selecting File > Publish to the web...
Choose the Comma-separated value option as shown below.
Click the Publish button and copy the full link provided.
⚠️ If you are using your school Google account, ensure that you turn off restricting access to your school. If you are using a personal Google account your published link should work fine without needing to do this.
Find the setup() function in your JavaScript file, like the example below, and replace your link as the googleSheetLink.
Now you can edit your Google Sheet and your question database will automatically be updated in your trivia app.
The following example code demonstrates how to add basic scoring to your trivia game.
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.
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.
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.
Let's add some simple sound effects to your trivia game when a player answers a question.
1 - Find sound effects you would like to use or make your own. Files of type .mp3 are a good choice for web apps. You can download the two sounds below as a starting point.
2 - Create a folder named sounds and place your sound files in it. Pay close attention to your files and folder structure for you app. Below is an example of what yours should look like.
index.html
style.css
code.js
sounds
sound_correct.mp3
sound_incorrect.mp3
3 - Declare variables for your sounds at the very top of your code.js file. They should be above the setup() function. These lines create variables that will represent your sound files so that you can play them at a later point in your code. Also, since we are placing them at the top of your code and not inside any function, they are called global variables. This means we can access these variables inside any other function, which we will do next.
4 - Place the code shown below inside your onClickedAnswer( ) function to play the sounds at the appropriate time. Notice how we are combining the text and sound feedback in our if/else statements inside the code brackets { }. Your text feedback will likely be different. So adjust as needed.
That's it. Your game should now play your sound effects when a player answers a question.
If you are using a longer sound file, like a song, you will want to know about the following two features.
pause( ) - This method will pause your sound. For example, soundCorrect.pause( );
currentTime - This property can be used to reset the sound to the beginning. For example, soundCorrect.currentTime = 0;
Let's add a screen for the player to choose a question category after they click start.
1 - Add the following HTML in your index.html file just after your welcome screen. This provides a place for the iDEW trivia library to place buttons for your categories.
2 - Enable trivia categories in your code.js file by placing the following Javascript line inside your setup( ) function. This simply tells the iDEW trivia library that you would like to process your category screen.
3 - Add the following Javascript function in your code.js file after (not inside) your displayWelcome( ) function.
4 - Modify your current onClickedStart( ) function to include displayCategories(), shown on line 2 below. You should remove displayQuestion()line inside your onClickedStart(). You simply want the player to see your categories screen after clicking start, instead of going straight to the question screen.
5 - Lastly, add a new Javascript function to handle what to do when a category is selected. In this case you will just move the player on to the question screen. The iDEW trivia library is keeping track of what category was selected. To keep things tidy, place this new function just before (but not inside) your onClickedStart( ) function.
That's it. Try it out.
The default trivia template moves the player on to the next question after a few seconds. This example demonstrates how to add a button for the player to click that moves the game along to the next question.
First, find the onClickedAnswer( ) function. Then locate the following line of code in that function.
The code above causes your game to wait 3 seconds before moving on to the next question. Since you will use a button instead, you can either delete this line of code or comment // it out.
Next, add the following line of code as a replacement. Notice how an HTML button is appended after your question feedback that responds to a click by running trivia.gotoNextQuestion() .
That's it. It should work for you. Consider styling this button differently by assigning it a class and adding the new style in your CSS.
This is an example of adding a timer to the question screen that counts down to zero.
Add the following HTML element inside your question screen section--and probably at the top of the screen. This will be where your timer digits will be displayed.
Add the code shown below to your displayQuestion ( ) function inside the curly braces { } of the function's code block. The Javascript function called setInterval runs a block of code at a set interval. In this example, we run a block of code every 100 milliseconds that allows us to update the countdown timer accurately. If the timer reaches zero, it triggers an incorrect answer using trivia.triggerAnswer(false). Notice that you can adjust the time limit by changing the timeLimit variable.
Below is an example of some basic CSS properties you could apply in your stylesheet. Adjust as needed.
That's it. You should have a functioning timer that you can modify as you wish.
Add the following HTML element inside your question screen section--and probably at the top of the screen. This will be where your timer digits will be displayed.
Add the following HTML element insider your question screen section--possibly at the bottom. This is the button to pause the game.
Add the code shown below to your displayQuestion ( ) function inside the curly braces { } of the function's code block. The Javascript function called setInterval runs a block of code at a set interval. In this example, we run a block of code every 100 milliseconds that allows us to update the countdown timer accurately. If the timer reaches zero, it triggers an incorrect answer using trivia.triggerAnswer(false). Notice that you can adjust the time limit by changing the timeLimit variable.
Add the following function to your Javascript file at the bottom. This will change the pause state of the game and change the text of the button appropriately. Your HTML button runs this function on a click.
Add the following line to the top (but inside the curly braces) of your onClickedAnswer function. This will hide the pause button after an answer is clicked. It probably doesn't make sense to have that button showing after the answer is clicked.
Below is an example of some basic CSS properties you could apply in your stylesheet. Adjust as needed.
That's it. You should have a functioning timer that you can modify as you wish.
If you want questions to display a particular image, like shown above, here are the basic steps.
index.html
style.css
code.js
images
question1image.png
question2image.png
You may want to place this right below your question, like the example at the top of this page.
You will want to add this right after trivia.insertQuestionInfo(); in your displayQuestion( ) function.
These styles will maintain the width of the image and center it on the screen. Change the styles as needed.
That's it. It should work for you now.
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.
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.
That's it. Try it out.
This is an example of how you can provide special feedback for each trivia question after the player answers. For example, you may want to provide more information on that question's topic whether they answered correctly or not.
1 - Add a "feedback" column to your question spreadsheet (our database) like shown below, and add custom feedback text for each question.
2 - Next, you want to use the trivia property trivia.currentQuestion.feedback to place the text in the HTML element having id="feedback". Notice how this is done in lines 2 and 3 below. Make the same changes within your onClickedAnswer function in your JavaScript.
That's it. Try it out.
The function below uses p5.js functions to create a spinning block that you can add to your app background.
1 - Add the following function to the bottom of your JavaScript.
2 - Now you simply need to call this function when you want it to display in the background. In the example below, spinningBlock( ) is called in the draw( ) function when the trivia game state is "welcome" on line 3. If you want, you can choose to call the function at a different point.
The spinningBlock is a simple example of adding an animation to your background, but you can come up with your own animation and call it something different than spinningBlock( ).
For example, you may choose to create an animation that looks like balloons rising up and call it balloons( ). It may be challenging, but you can use functions from the p5.js (as we did above for the spinning block) to create some really interesting animations.
Here are more examples of custom animation functions that could be implemented like the spinningBlock() above.
