Vytvářím jednoduchý kvíz v JavaScriptu.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Quiz</title>
</head>
<body>
<h1>Chcete být milionářem</h1>
<script src="script2.js"></script>
<script>
createTemplate();
askQuestion();
</script>
</body>
</html>
script2.js
var div;
var questionBox;
var choicesBox;
var buttonNext;
var scoreBox;
var questionNumber = 0;
questionBox = document.createElement('h3');
questionBox.setAttribute('id', 'questionbox')
choicesBox = document.createElement('form');
buttonNext = document.createElement('button');
scoreBox = document.createElement('p');
function createTemplate() {
div = document.createElement('div');
document.body.appendChild(div);
div.appendChild(questionBox);
div.appendChild(choicesBox);
div.appendChild(buttonNext);
div.appendChild(scoreBox);
}
function askQuestion() {
appendQuestion();
appendChoices();
appendButtonNext();
}
function appendQuestion() {
var text = document.createTextNode(questionList[questionNumber].question);
var question = document.getElementById('questionbox');
return question.appendChild(text);
}
function appendChoices() {
for (var choice in questionList[questionNumber].choices) {
var label = document.createElement('label');
label.setAttribute('for', choice);
var text = document.createTextNode(questionList[questionNumber].choices[choice]);
label.appendChild(text);
choicesBox.appendChild(label);
var input = document.createElement('input');
input.setAttribute('type', 'radio');
input.setAttribute('id', choice);
input.setAttribute('name', 'choice');
choicesBox.appendChild(input);
}
}
function appendButtonNext() {
var text = document.createTextNode('Next question');
buttonNext.setAttribute('onclick', 'nextQuestion();');
buttonNext.appendChild(text);
}
function nextQuestion() {
questionNumber++;
removeContentBox();
createTemplate();
askQuestion();
}
function removeContentBox() {
div.remove();
}
var questionList = [
{
question: "Kdo je premiérem Velké Británie?",
choices: ["Tony Blair", "Gordon Brown", "Winston Churchill", "David Cameron"],
correctAnswer:3,
},
{
question: "Jaká je nejdelší řeka světa?",
choices: ["Amazonka", "Rýn", "Nil", "Mississippi",] ,
correctAnswer: 0,
},
{
question: "Kdo je autorem Linuxu?",
choices: ["Bill Gates", "Linus Torvalds", "Liam Neeson", "Steve Jobs",] ,
correctAnswer: 1,
},
{
question: "Kolik kusů je tucet?",
choices: ["6", "12", "24", "48",] ,
correctAnswer: 1,
},
{
question: "Z čeho jsou žlučové kameny?",
choices: ["z hemoglobinu", "ze žluči", "z cholesterolu", "z vápníku",] ,
correctAnswer: 2,
},
{
question: "Jak se jmenuje předloha stavebnice Igráček?",
choices: ["Igláček", "Playmobil", "Juguete", "Malčik",] ,
correctAnswer: 1,
},
]
Klikem na button se napřed DIV s otázkou odstraní, pak by se měla vytvořit nová kostra DIVu funkcí createTemplate() a do ní by se měl připnout obsah nové otázky.
Místo toho se nová otázka přidává na tu předchozí, viz elementy h3 a form.
<html lang="en"><head>
<meta charset="UTF-8">
<title>Quiz</title>
</head>
<body>
<h1>Chcete být milionářem</h1>
<script src="script2.js"></script>
<script>
createTemplate();
askQuestion();
</script>
<div><h3 id="questionbox">Kdo je premiérem Velké Británie?Jaká je nejdelší řeka světa?Kdo je autorem Linuxu?</h3><form><label for="0">Tony Blair</label><input type="radio" id="0" name="choice"><label for="1">Gordon Brown</label><input type="radio" id="1" name="choice"><label for="2">Winston Churchill</label><input type="radio" id="2" name="choice"><label for="3">David Cameron</label><input type="radio" id="3" name="choice"><label for="0">Amazonka</label><input type="radio" id="0" name="choice"><label for="1">Rýn</label><input type="radio" id="1" name="choice"><label for="2">Nil</label><input type="radio" id="2" name="choice"><label for="3">Mississippi</label><input type="radio" id="3" name="choice"><label for="0">Bill Gates</label><input type="radio" id="0" name="choice"><label for="1">Linus Torvalds</label><input type="radio" id="1" name="choice"><label for="2">Liam Neeson</label><input type="radio" id="2" name="choice"><label for="3">Steve Jobs</label><input type="radio" id="3" name="choice"></form><button onclick="nextQuestion();">Next questionNext questionNext question</button><p></p></div></body></html>
TIP: Přetáhni ikonu na hlavní panel pro připnutí webu
