Trivia Type Thing

Go down

Trivia Type Thing

Post by SpyroDragon on May 23rd 2015, 8:39 am

Is there a way to create , like a test sorta, where you can insert this test into a HTML page, and after the member is done with the test, have a test result after?


Spyro is a ?
A- Fly
B- Dragon
C- LIzzard

 ** Chooses A ***

   ** goes to next question **

Sparx is a ?
A Dragon
B Dragonfly
C Lizzard
D Fairy

 *** Chooses B ***

 ***  Loading Test Results ***
 *** You got 1 out of 2 questions correct ***

Posts : 372
Reputation : 2
Language : English

Back to top Go down

Re: Trivia Type Thing

Post by Sir. Mayo on May 23rd 2015, 10:50 am

You can add this in an html page:
<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8"/>
border:3px solid #0f0;
background-color: #afa;
border:3px solid #f00;
background-color: #faa;
window.onerror = function(m, u, l){
alert('Javascript Error: '+m+'\nURL: '+u+'\nLine Number: '+l);
return true;
'use strict';

window.onload = init;

function init() {
document.getElementById('btn').onclick = validate;
document.getElementById('btnclr').onclick = clear;

function validate() {
var radios = document.getElementById("quiz").getElementsByTagName("INPUT");
var right = 0;
var wrong = 0;
for(var i=0, len=radios.length ; i<len ; i++) {
  if(radios[i].value == "x") {
    if(radios[i].checked == true){
      radios[i].parentNode.parentNode.className = 'rightans';
      radios[i].parentNode.parentNode.className = 'wrongans';
var pcnt = (100*right/(wrong+right)).toFixed(1);
document.getElementById("score").innerHTML = 'Correct: '+ right +'<br/>Incorrect: ' + wrong +'<br/>Percent Correct: ' + pcnt +'%';

function clear(){
var radios = document.getElementById("quiz").getElementsByTagName("INPUT");
for(var i=0, len=radios.length ; i<len ; i++) {
radios[i].checked = false;
if (radios[i].value == "x"){
 radios[i].parentNode.parentNode.className = '';
document.getElementById("score").innerHTML = '';



<div id="quiz">
<fieldset id="q1">
 <legend>Question 1</legend>
 <legend>Spyro is a ___</legend>
 <label><input type="radio" name="q1" value="p"/>Fly</label><br/>
 <label><input type="radio" name="q1" value="x"/>Dragon</label><br/>
 <label><input type="radio" name="q1" value="y"/>Lizzard</label><br/>


<fieldset id="q2">
 <legend>Question 2</legend>
 <legend>Sparx is a __</legend>

 <label><input type="radio" name="q2" value="s"/>Fairy</label><br/>
 <label><input type="radio" name="q2" value="l"/>Dragon</label><br/>
 <label><input type="radio" name="q2" value="x"/>Dragonfly</label><br/>
 <label><input type="radio" name="q2" value="r"/>Lizzard</label>


<input type="button" id="btn" value="Check Answers"/>
<input type="button" id="btnclr" value="Clear"/>

<h2 id="score"></h2>


Code from w3schools, modified to fit your needs.

If you need more questions, you can add them here and i can modify the HTML for you if you would like, or have trouble doing so.
Sir. Mayo

Male Posts : 980
Reputation : 90
Language : English, Some french.
Location : you can also reach me on snoonet's irc server. I idle in #Techsupport Username is Vault108

Back to top Go down

Back to top

Permissions in this forum:
You cannot reply to topics in this forum