Drawing Dinosaurs

Drawing Dinosaurs Banner

Tutorial: How to Create a Quiz with JavaScript

Sections of this tutorial:

Here are a list of code definitions described in this tutorial:

Inserting or Linking JavaScript to Your HTML File

Before you create your javascript, you should know where to put it. You can either place it inside the head section of your HTML document between two script tags like this:

<script> </script>

Alternatively, you could use this code to place a link to an external javascript file. It should be located in the same location before the closing html tag of the document. The link should look like:

<script src="NameOfYourJsFile.js"></script>

It would also be placed near the bottom section of your html file before the closing html tag to link it to your external javascript file. An external javascript file allows you to keep all your JavaScript for the page it is linked to in an external JavaScript file. It works a lot like keeping CSS in an external file and linking your page to the external CSS instead of placing it all in one document.

Step 2: HTML Portion of the Code

To create a quiz questionaire and place to display the results of answers to the quiz, you will need to create the necessary HTML to display it. Here an example of code used to create a dinosaur identification question and display the results of the user's answers:

<h3>Dinosaur Identification Challenge</h3>
<img alt="DinosaurImageDescription" src="YourDinosaurImage.png">

<p>Which Species of Dinosaur is displayed in the image above?</p>
<ul> 	<li> A. Stegosaurus </li>
	<li> B. Kentrosaurus </li>
	<li> C. Triceratops </li>
	<li> D. Acrocanthosaurus </li>
</ul>
<p>Use the Box Below to Type the Value for the Letter Corresponding to Your Answer to Check if You're Right:</p>

<!-- Answer Input Field For User to Type Their Answer and Check if it is Right or Wrong. -->
<input type="text" onkeyup="amIRight(this)">
<div id="answerField"></div>

<!-- Tells User Number of Times They Answered Wrong. -->
<p>Failed Key Entries (Number of Times Wrong Anwers Were Typed):</p>
<div id="failureField"></div>

If your image does not display properly, the alt tag description will be displayed instead. It also is needed by some people with disabilities who use automated screen readers to navigate the internet. In their case, they would hear the description, but not see the image. For that reason, this is the alt tag description I used for the "Dinosaur Identification Challenge":

"Hint: The scientific name means of this dinosaur means sharp point or prickle lizard."

<img alt="Hint: The scientific name means of this dinosaur means sharp point or prickle lizard." src="YourDinosaurImage.png">

You can change the question, image, and the answers used in my example to anything you want if you create your own version of this questionaire for your own web page and still use the same basic format if you want.

You can insert comments into HTML that do not effect the function of the code or how it is displayed on the web page, but allow for comments to be left in the code for the authors or other developers to read. There are comments in some parts of the HTML code I just showed you. This is what an HTML comment looks like:

<!-- HTML Comment Example -->

Step 3: JavaScript Portion of the Code

This is the JavaScript that makes the quiz display feedback based on the answer inputs of the user:

<script>
//Script Tells User if Their Answer is Correct (FYI the Correct Answer is B)
//var answer determines which letter is considered a correct answer key entry.
function amIRight(e){
var answer = "b";  
var answerField = document.getElementById("answerField");
if(e.value.toLowerCase() == answer){
	answerField.innerHTML="Correct Answer!";
}
else{
	answerField.innerHTML="Wrong Answer!";
};
};
</script>
<script>
//Calculates the Number of Times a User Inputs the Wrong Answer
var iCountFailures = 0;

function amIRight(e){
  var answer = "b";  
  var answerField = document.getElementById("answerField");
  var failedField = document.getElementById("failureField");
  if(e.value.toLowerCase() == answer){
    answerField.innerHTML = "Correct Answer!";
  }
  else{
    answerField.innerHTML = "Wrong Answer!";
// Counts the number of wrong answer keystrokes and displays it to the user
    iCountFailures = iCountFailures + 1;
    failedField.innerHTML = iCountFailures;
   };
  
};
</script>

// is the beginning of a line of a JavaScript comment. JavaScript comments are used to leave comments by the author as notes for the author(s) or other developers who view the code without effecting the functioning of the code.

JavaScript variables: containers used to store data values (represented in the JavaScript code above as var variableKeyword.) Example above: var answer = "b"; Answer is the keyword, "b" is the datatype stored in the variable (as a "string" datatype).

var answer = "b"; is the part of the JavaScript tha determines which letter is considered a correct answer key entry by the user. Since this is the part that determines what is correct, you can easily modify this to be any answer you want by changing the letter b inside the quotation marks.

JavaScript Functions: A block of code designed to perform a particular task, executed it is called by "something". Example above: function amIRight(e)

End Result Example:

Dinosaur Identification Challenge

Hint: The scientific name means of this dinosaur means sharp point or prickle lizard.

"File:Kentrosaurus digital clay reconstruction.png"by Dotname2469 is licensed under CC BY-SA 3.0CreativeCommonsAttributionCreativeCommonsIcon1CreativeCommonsIcon

Which Species of Dinosaur is displayed in the image above?

  • A. Stegosaurus
  • B. Kentrosaurus
  • C. Triceratops
  • D. Acrocanthosaurus

Use the Box Below to Type the Value for the Letter Corresponding to Your Answer to Check if You're Right:

Failed Key Entries (Number of Times Wrong Anwers Were Typed):

© 2019 Holly Amber Copeland / Holly Amber Graphic & Web Design

This Website is for Educational Purposes Only. Drawing Dinosaurs is not a real business or organization.

Source of image used for the "Dinosaur Identification Challenge" of Kentrosaurus 3D model:

"File:Kentrosaurus digital clay reconstruction.png"by Dotname2469 is licensed under CC BY-SA 3.0CreativeCommonsAttributionCreativeCommonsIcon1CreativeCommonsIcon