My First Quiz

by Mehmetcan Sinir

HTML

<div id="header">
     <h1> Quiz About Turkey </h1>

</div>
<div id="instructions">
     <h3>This is a quiz about the country Turkey. With the "next" button below you can nagivate through this Quiz. Click "next" to start.</h3>

</div>
<input type="button" id="button" value="next" />

CSS

#header {
    text-align: center;
    background-color: #81BEF7;
    padding: 10px;
}
#instructions {
    height: 100%;
    width: 100%;
}
.questionFrame {
    height: 100%;
    width: 100%;
    background-color: #2EFEF7;
    font-family: comic sans ms;
    font-weight: bold italic;
}
#resultsPage {
    height: 100%;
    width: 100%;
    background-color: #2EFEF7;
    font-family: comic sans ms;
    font-weight: italic;
}
#button {
    background-color: #642EFE;
    height: 30px;
    width: 70px;
    color: #ffffff;
    text-align: center;
    border: 4px solid #2EFEF7;
    border-radius: 25%;
    margin-top: 30px;
    margin-left: 370px;
}
#announcement

JavaScript

//get the questions into an array
var allQuestions = [{
    question: "What is the capital of Turkey?",
    answers: ["Istanbul", "Ankara", "Izmir", "Trabzon"],
    correctAnswer: 1

},

{
    question: "When was Turkey established?",
    answers: [1923, 1928, 1933, 1934],
    correctAnswer: 0
},

{
    question: "What is the population of Turkey?",
    answers: ["90 million", "75 million", "100 million", "80 million"],
    correctAnswer: 1
},

{
    question4: "What is the population of Turkey's biggest city, Istanbul?",
    answers: ["18 million", "16 million", "14 million", "7 million"],
    correctAnswer: 2
}]

//CREATING SOME VARIABLES
//create a questionCounter
var questionCounter = 0;
//create a score variable
var score = 0;
//create an answer variable
var answer = null;
//create a variable to check if an answer is selected, will turn true if so
var isItSelected = false;
//we will change the questions by removing and appending the second element child of the body, get the document.body into variable access its children easily
var body = document.body;


//PREPARING THE PAGES OF THE QUIZ
//first we prepare a page for every question
var questionOne = document.createElement("div");
questionOne.className = "questionFrame";
questionOne.innerHTML = "<p class='question'> What is the capital of Turkey?</p> <br/> <ul><li><input type='radio' name='answers' value='0'/>Istanbul</li><li><input type='radio' name='answers' value='1'/>Ankara</li><li><input type='radio' name='answers' value='2'/>Izmir</li><li><input type='radio' name='answers' value='3'/>Trabzon</li></ul>"

var questionTwo = document.createElement("div");
questionTwo.className = "questionFrame";
questionTwo.innerHTML = "<p class='question'> When was Turkey established?</p> <br/> <ul><li><input type='radio' name='answers' value='0'/>1923</li><li><input type='radio' name='answers' value='1'/>1928</li><li><input type='radio' name='answers' value='2'/>1933</li><li><input type='radio' name='answers'...