In this post I will explain how to create a very simple HTML and Javascript quiz that uses functions. A function is a set of code in Javascript that does a specific task. Below is a example of a function:
function helloworldFunction()
alert(“Hello world!”)
When you open this code in a browser, the page alerts “hello world!”
However, to make the function interesting, you can add it to an HTML button. For example:
<button onClick=“helloworldFunction()”>hello world button</button>
When you click the button, the webpage alerts you, saying “hello world”. The above code is the basis for building a function quiz. Below is the code required to make a function quiz. (Note: the questions and answers shown here are examples, and you can make your own questions and answers. Also, the CSS styling can be made up as well. I used a black background with a border of solid blue and colored the text white.
FUNCTION QUIZ code example:
<!DOCTYPE html>
<html>
<head>
<font color=“#ffffff”><title>Quiz</title>
<h1>Quiz</h1>
</head>
<body>
<style>
background-color: #000000;
border: 2px solid blue;
</style>
<p>1. Which one of these codes is the HEX code for orange?</p>
<button onClick=“wrongFunction()”>#ffffff</button>
<button onClick=“correctFunction()”>#FFA500</button>
<button onClick=“wrongFunction()”>#FF0000</button>
<button onClick=“wrongFunction()”>#000000</button>
<p>2. How many species of birds are found in North America?</p>
<button onClick=“correctFunction()”>500</button>
<button onClick=“wrongFunction()”>125</button>
<button onClick=“wrongFunction()”>213</button>
<button onClick=“wrongFunction()”>100</button>
<p>3. Jays and magpies make up which one of these bird families?</p>
<button onClick=“wrongFunction()”>Ardeidae</button>
<button onClick=“wrongFunction()”>Cotingidae</button>
<button onClick=“wrongFunction()”>Hirundinidae</button>
<button onClick=“correctFunction()”>Corvidae</button>
<p>4. The apple is native to which one of these continents?</p>
<button onClick=“wrongFunction()”>Europe</button>
<button onClick=“wrongFunction()”>North America</button>
<button onClick=“correctFunction()”>Asia</button>
<button onClick=“wrongFunction()”>South America</button>
<p>5. What is the name of the ecozone comprising of Europe, western Asia, and Northern Africa called?</p>
<button onClick=“correctFunction()”>Palearctic ecozone</button>
<button onClick=“wrongFunction()”>Neotropical ecozone</button>
<button onClick=“wrongFunction()”>Indomalayan ecozone</button>
<button onClick=“wrongFunction()”>Australasian ecozone</button>
<p>6. What Palezoic period did blastoids go extinct in?</p>
<button onClick=“wrongFunction()”>Ordovician</button>
<button onClick=“wrongFunction()”>Carboniferous</button>
<button onClick=“wrongFunction()”>Devonian</button>
<button onClick=“correctFunction()”>Permian</button>
<p>7. What is the name of the highest mountain in South America?</p>
<button onClick=“correctFunction()”>Mount Aconcagua</button>
<button onClick=“wrongFunction()”>Mount Huascaran</button>
<button onClick=“wrongFunction()”>Mount Everest</button>
<button onClick=“wrongFunction()”>K2</button>
<p>8. The Netherlands have a large population of what native waterbird, named for its unusual bill?</p>
<button onClick=“wrongFunction()”>Grey heron</button>
<button onClick=“wrongFunction()”>Common eider</button>
<button onClick=“correctFunction()”>Eurasian spoonbill</button>
<button onClick=“wrongFunction()”>Common scoter</button>
<p>9. What time period did Archelon, a giant sea turtle, live in?</p>
<button onClick=“correctFunction()”>Cretaceous</button>
<button onClick=“wrongFunction()”>Jurassic</button>
<button onClick=“wrongFunction()”>Paleogene</button>
<button onClick=“wrongFunction”>Neogene</button>
<p>10. Which one of these birds are the New world vultures closely related to?</p>
<button onClick=“wrongFunction()”>Old World vultures</button>
<button onClick=“correctFunction()”>Storks</button>
<button onClick=“wrongFunction()”>Hawks and eagles</button>
<button onClick=“wrongFunction()”>Falcons</button>
<script>
function correctFunction() {
alert(“Correct!”)
}
function wrongFunction() {
alert(“Wrong”)
}
</script>
In the code above, the HTML and CSS style the page, and the Javascript adds interactivity to the buttons created using HTML. The CSS code sets the styling of the page (in this case, a black background with a blue border), and the HTML make the questions as well as the answer buttons. The HTML code is linked to the Javascript code through the onClick property. The Javascript code includes the correct and wrong functions and the javascript alerts for correct and wrong selected answers.