Quiz

by Matheus Loures

HTML

<script src="https://www.dropbox.com/s/scijftpj11hrlyv/activity.json?dl=0"></script>
<script src="https://www.dropbox.com/s/jyqvw9x2qucm5rk/words.json?dl=0"></script>
<body>

<div id="topbar">Quiz</div>
<div class="spacer"></div>

<div id="navContent">

<div id="game1"><div id="words"></div></div>
<div id="game2"><div id="words2"></div></div>
</div>
 



</body>

CSS

html, body {
	margin: 0;
	padding: 0;
  background-image:url(greybg.png);
	  font-family: Arial, Helvetica, sans-serif;
	    }

#navContent{
margin:auto;	
width:800px;
height:400px;
position:relative;
overflow:hidden;
}

#game1{
margin:auto;
width:800px;
height:400px;
right:0px;
position:absolute;
}

#game2{
margin:auto;	
width:800px;
height:400px;
right:-800px;
position:absolute;
} 



 
.questionText{
font-size:27px;
color:#FFF;
}

.option{width:400px;
height:30px;
margin:15px;
font-size:18px;
color:#FFFFFF; 
padding:2px;
padding-left:10px;
border: 2px solid white;
cursor:pointer;
background-color:#3399FF;
}

.option:hover{
border:#FC0 solid 2px;
color:#FC0;
}


		







 

#topbar{
height:50px;
margin:auto;
margin-top:50px;
color:#FFF;
font-size:36px;
font-family:Arial, Helvetica, sans-serif;
width:800px;
border-bottom:solid white 1px;
}
 
.spacer{
height:30px;
}

 




.feedback1{
width:150px;
padding:5px;
font-size:30px;
color:#FFFFCC;
background-color:#009900;
font-family:Arial, Helvetica, sans-serif;
text-align:center;
}

.feedback2{
width:150px;
padding:5px;
font-size:30px;
color:#FFFFCC;
background-color:#CC3300;
font-family:Arial, Helvetica, sans-serif;
text-align:center;
}

JavaScript

$(document).ready(function () {
	
var questionNumber=0;
var wordNumber=0;
var questionBank=new Array();
var wordsBank=new Array();
var stage="#game1";
var stage2=new Object;
var questionLock=false;
var numberOfQuestions;
var score=0;
		 
		 
//get JSON for questions
 	$.getJSON('activity.json', function(data){
  numberOfQuestions = data.quizlist.length;
  for(i = 0; i < numberOfQuestions; i++){
    questionBank[i] = [];
    questionBank[i].push(data.quizlist[i].question);
    questionBank[i].push(data.quizlist[i].option1);
    questionBank[i].push(data.quizlist[i].option2);
    questionBank[i].push(data.quizlist[i].option3);
  }      
//get JSON for words
  $.getJSON('words.json', function(data){
    numberOfWords = data.quizlist.length;
    for(i = 0; i < numberOfWords; i++){
      wordsBank[i] = [];
      wordsBank[i].push(data.quizlist[0].words1);
      wordsBank[i].push(data.quizlist[1].words2);
    }        
    displayQuestion();
  });
}) //gtjson
 
 

//Display question and word, if correct
function displayQuestion(){

//separate div that is the container of words.json
 var wordsShow = $('<div class= "center_txt"><div id="1">'+q5+'</div><div id="2">'+q4+'</div></div>')

 var rnd=Math.random()*3;
rnd=Math.ceil(rnd);
 var q1;
 var q2;
 var q3;

if(rnd==1){q1=questionBank[questionNumber][1];q2=questionBank[questionNumber][2];q3=questionBank[questionNumber][3];}
if(rnd==2){q2=questionBank[questionNumber][1];q3=questionBank[questionNumber][2];q1=questionBank[questionNumber][3];}
if(rnd==3){q3=questionBank[questionNumber][1];q1=questionBank[questionNumber][2];q2=questionBank[questionNumber][3];}

//show the options
$(stage).append('<div class="questionText">'+questionBank[questionNumber][0]+'</div><div id="1" class="option">'+q1+'</div><div id="2" class="option">'+q2+'</div><div id="3" class="option">'+q3+'</div>');

 $('.option').click(function(){
  if(questionLock==false){questionLock=true;	
  //correct answer
  
  //show the word from words.json
 ...