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:<\/p>\n
function\u00a0<\/em>helloworldFunction()\u00a0<\/span><\/span><\/p>\n alert(“Hello world!”)<\/span><\/span><\/span><\/span><\/p>\n When you open this code in a browser, the page alerts “hello world!”<\/p>\n However, to make the function interesting, you can add it to an HTML button. For example:<\/p>\n <button\u00a0onClick=“helloworldFunction()”>hello world button<\/button<\/span>><\/span><\/span><\/span><\/span><\/p>\n 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.<\/p>\n FUNCTION QUIZ code example:<\/p>\n <\/p>\n <\/p>\n <!DOCTYPE html> <p<\/span>>2. How many species of birds are found in North America?<\/p<\/span>> <p<\/span>>3. Jays and magpies make up which one of these bird families?<\/p<\/span>> <p<\/span>>4. The apple is native to which one of these continents?<\/p<\/span>> <p<\/span>>5. What is the name of the ecozone comprising of Europe, western Asia, and Northern Africa called?<\/p<\/span>> <p<\/span>>6. What Palezoic period did blastoids go extinct in?<\/p<\/span>> <p<\/span>>7. What is the name of the highest mountain in South America?<\/p<\/span>> <p<\/span>>8. The Netherlands have a large population of what native waterbird, named for its unusual bill?<\/p<\/span>> <p<\/span>>9. What time period did Archelon, a giant sea turtle, live in?<\/p<\/span>> <p<\/span>>10. Which one of these birds are the New world vultures closely related to?<\/p<\/span>> <script<\/span>><\/p>\n function <\/span><\/em>correctFunction() { function <\/em>wrongFunction() { <\/script<\/span>><\/p>\n 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\u00a0the correct and wrong functions and the javascript alerts for correct and wrong selected answers.<\/p>\n","protected":false},"excerpt":{"rendered":" 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\u00a0helloworldFunction()\u00a0 alert(“Hello world!”) When you open this code in a browser, the page alerts “hello […]<\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-412","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"yoast_head":"\n
\n<html<\/span>>
\n<head<\/span>>
\n<font<\/span> color<\/span>=“#ffffff”<\/span>><title<\/span>>Quiz<\/title<\/span>>
\n<h1<\/span>>Quiz<\/h1<\/span>>
\n<\/head<\/span>>
\n<body<\/span>>
\n<style<\/span>>
\nbackground-color<\/em><\/span>: #000000;
\nborder<\/em><\/span>: 2<\/span>px solid blue;
\n<\/style<\/span>>
\n<p<\/span>>1. Which one of these codes is the HEX code for orange?<\/p<\/span>>
\n<button<\/span> onClick<\/span>=“wrongFunction()”<\/span>>#ffffff<\/button<\/span>>
\n<button<\/span> onClick<\/span>=“correctFunction()”<\/span>>#FFA500<\/button<\/span>>
\n<button<\/span> onClick<\/span>=“wrongFunction()”<\/span>>#FF0000<\/button<\/span>>
\n<button<\/span> onClick<\/span>=“wrongFunction()”<\/span>>#000000<\/button<\/span>><\/span><\/span><\/span><\/span><\/span><\/p>\n
\n<button<\/span> onClick<\/span>=“correctFunction()”<\/span>>500<\/button<\/span>>
\n<button<\/span> onClick<\/span>=“wrongFunction()”<\/span>>125<\/button<\/span>>
\n<button<\/span> onClick<\/span>=“wrongFunction()”<\/span>>213<\/button<\/span>>
\n<button<\/span> onClick<\/span>=“wrongFunction()”<\/span>>100<\/button<\/span>><\/p>\n
\n<button<\/span> onClick<\/span>=“wrongFunction()”<\/span>>Ardeidae<\/button<\/span>>
\n<button<\/span> onClick<\/span>=“wrongFunction()”<\/span>>Cotingidae<\/button<\/span>>
\n<button<\/span> onClick<\/span>=“wrongFunction()”<\/span>>Hirundinidae<\/button<\/span>>
\n<button<\/span> onClick<\/span>=“correctFunction()”<\/span>>Corvidae<\/button<\/span>><\/p>\n
\n<button<\/span> onClick<\/span>=“wrongFunction()”<\/span>>Europe<\/button<\/span>>
\n<button<\/span> onClick<\/span>=“wrongFunction()”<\/span>>North America<\/button<\/span>>
\n<button<\/span> onClick<\/span>=“correctFunction()”<\/span>>Asia<\/button<\/span>>
\n<button<\/span> onClick<\/span>=“wrongFunction()”<\/span>>South America<\/button<\/span>><\/p>\n
\n<button<\/span> onClick<\/span>=“correctFunction()”<\/span>>Palearctic ecozone<\/button<\/span>>
\n<button<\/span> onClick<\/span>=“wrongFunction()”<\/span>>Neotropical ecozone<\/button<\/span>>
\n<button<\/span> onClick<\/span>=“wrongFunction()”<\/span>>Indomalayan ecozone<\/button<\/span>>
\n<button<\/span> onClick<\/span>=“wrongFunction()”<\/span>>Australasian ecozone<\/button<\/span>><\/p>\n
\n<button<\/span> onClick<\/span>=“wrongFunction()”<\/span>>Ordovician<\/button<\/span>>
\n<button<\/span> onClick<\/span>=“wrongFunction()”<\/span>>Carboniferous<\/button<\/span>>
\n<button<\/span> onClick<\/span>=“wrongFunction()”<\/span>>Devonian<\/button<\/span>>
\n<button<\/span> onClick<\/span>=“correctFunction()”<\/span>>Permian<\/button<\/span>><\/p>\n
\n<button<\/span> onClick<\/span>=“correctFunction()”<\/span>>Mount Aconcagua<\/button<\/span>>
\n<button<\/span> onClick<\/span>=“wrongFunction()”<\/span>>Mount Huascaran<\/button<\/span>>
\n<button<\/span> onClick<\/span>=“wrongFunction()”<\/span>>Mount Everest<\/button<\/span>>
\n<button<\/span> onClick<\/span>=“wrongFunction()”<\/span>>K2<\/button<\/span>><\/p>\n
\n<button<\/span> onClick<\/span>=“wrongFunction()”<\/span>>Grey heron<\/button<\/span>>
\n<button<\/span> onClick<\/span>=“wrongFunction()”<\/span>>Common eider<\/button<\/span>>
\n<button<\/span> onClick<\/span>=“correctFunction()”<\/span>>Eurasian spoonbill<\/button<\/span>>
\n<button<\/span> onClick<\/span>=“wrongFunction()”<\/span>>Common scoter<\/button<\/span>><\/p>\n
\n<button<\/span> onClick<\/span>=“correctFunction()”<\/span>>Cretaceous<\/button<\/span>>
\n<button<\/span> onClick<\/span>=“wrongFunction()”<\/span>>Jurassic<\/button<\/span>>
\n<button<\/span> onClick<\/span>=“wrongFunction()”<\/span>>Paleogene<\/button<\/span>>
\n<button<\/span> onClick<\/span>=“wrongFunction”<\/span>>Neogene<\/button<\/span>><\/p>\n
\n<button<\/span> onClick<\/span>=“wrongFunction()”<\/span>>Old World vultures<\/button<\/span>>
\n<button<\/span> onClick<\/span>=“correctFunction()”<\/span>>Storks<\/button<\/span>>
\n<button<\/span> onClick<\/span>=“wrongFunction()”<\/span>>Hawks and eagles<\/button<\/span>>
\n<button<\/span> onClick<\/span>=“wrongFunction()”<\/span>>Falcons<\/button<\/span>><\/p>\n
\n<\/span><\/span> alert(“Correct!”)
\n<\/span><\/span><\/span><\/span>}<\/p>\n
\n<\/span><\/span><\/span> alert<\/span>(“Wrong”<\/span>)
\n}<\/p>\n