The forum of the forums
Would you like to react to this message? Create an account in a few clicks or log in to continue.

Trivia Type Thing

2 posters

The forum of the forums :: Miscellaneous :: Garbage

Go down

Trivia Type Thing Empty Trivia Type Thing

Post by SpyroDragon 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?

Example:

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 ***
SpyroDragon
SpyroDragon
Forumember

Posts : 455
Reputation : 2
Language : English

http://tlos.forumotion.net/

Back to top Go down

Trivia Type Thing Empty Re: Trivia Type Thing

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

You can add this in an html page:
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>title</title>
<style>
.rightans{
border:3px solid #0f0;
background-color: #afa;
}
.wrongans{
border:3px solid #f00;
background-color: #faa;
}
</style>
<script>
window.onerror = function(m, u, l){
alert('Javascript Error: '+m+'\nURL: '+u+'\nLine Number: '+l);
return true;
}
</script>
<script>
'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){
      right++;
      radios[i].parentNode.parentNode.className = 'rightans';
    }else{
      wrong++;
      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 = '';
}

</script>
</head>

</body>

<div id="quiz">
<h1>Quiz</h1>
<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>

<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>
</fieldset>


</div>

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

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

</body>   
</html>

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
Sir. Mayo
Forumember

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

http://sir-mayo.forumotion.com/

Back to top Go down

Back to top

- Similar topics

The forum of the forums :: Miscellaneous :: Garbage

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