gabrielyb12
05-08-2017, 09:38 AM
good day everyone... can someone here help me on my project on multiple choice test using javascript? it will NOT generate scores in the end
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset="UTF-8">
<title>Quiz</title>
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
<div class ="grid">
<div id="quiz">
<h1>Quiz</h1>
<hr style="margin-bottom: 20px">
<p id="question"></p>
<div class="buttons">
<button id="btn0"><span id="choice0"></span></button>
<button id="btn1"><span id="choice1"></span></button>
<button id="btn2"><span id="choice2"></span></button>
<button id="btn3"><span id="choice3"></span></button>
</div>
<hr style="margin-top: 50px">
<footer>
<p id="progress">Question x of y.</p>
</footer>
</div>
</div>
<script src="quiz_controller.js"></script>
<script src="question.js"></script>
<script src="app.js"></script>
</body>
</html>
---------------------------
body{
background-color: #eeeeee;
}
.grid{
width: 600px;
height: 500px;
margin: 0 auto;
background-color: #fff;
padding: 10px 50px 50px 50px;
border-radius: 50px;
border: 2px solid #cbcbcb;
box-shadow: 10px 15px 5px #cbcbcb;
}
.grid h1 {
font-family: sans-serif;
background-color: #57636e;
font-size: 60px;
text-align: center;
color: #fff;
padding: 2px 0px;
border-radius: 50px;
}
.grid #question{
font-family: sans-serif;
font-size: 30px;
color: #5a6772
}
.buttons{
margin-top: 30px;
}
#btn0, #btn1, #btn2, #btn3{
background-color: #778897;
width: 250px;
font-size: 20px;
color: #fff;
border: 1px solid #1d3c6a;
border-radius: 50px;
margin: 10px 40px 10px 0px;
padding: 10px 10px;
}
#score {
color: #5A6772;
text-align:center;
font-size: 30px;
}
#progress{
color: #2b2b2b;
font-size: 18px;
}
#btn0:hover, #btn1:hover, #btn2:hover, #btn3:hover{
cursor: pointer;
background-color: #57636e;
}
#btn0:focus, #btn1:focus, #btn2:focus, #btn3:focus{
outline: 0;
}
-------
function Question(text, choices, answer){
this.text=text;
this.choices = choices;
this.answer = answer;
}
Question.prototype.correctAnswer = function (choice){
return choice === this.answer;
}
-------------
function populate(){
if (quiz.isEnded()) {
showScores();
}
else {
//show question
var element = document.getElementById("question");
element.innerHTML = quiz.getQuestionIndex().text;
//show choices
var choices = quiz.getQuestionIndex().choices;
for (var i = 0; i< choices.length; i++) {
var element = document.getElementById("choice" + i);
element.innerHTML = choices[i];
guess("btn" + i, choices[i]);
}
showProgress();
}
};
function guess(id, guess){
var button = document.getElementById(id);
button.onclick = function(){
quiz.guess();
populate();
}
};
function showProgress(){
var currentQuestionNumber = quiz.questionIndex + 1;
var element = document.getElementById("progress");
element.innerHTML = "Question" + currentQuestionNumber + "of" + quiz.questions.length;
};
function showScores(){
var gameOverHtml = "<h1>Result</h1>";
gameOverHtml += "<h2 id='score'>Your scores: "+ quiz.score +" </h2>";
var element = document.getElementById("quiz");
element.innerHTML = gameOverHtml;
};
var questions = [
new Question ("Which one is NOT an object oriented programming language?", ["Java", "C#", "C++", "C"], "C"),
new Question ("Which language is used for styling web pages?",["HTML", "JQuery", "CSS", "XMl"], "CSS" ),
new Question ("There are _______ main components of object oriented programming.",["1", "6", "2", "4" ], "4" ),
new Question ("Which language is used for web apps",["PHP", "Phyton", "Javascipt", "All"], "All" ),
new Question ("MVC is a ________.",["language", "library", "framework", "all"], "framework" )
];
var quiz = new Quiz(questions);
populate();
--------------
function Quiz (questions) {
this.score = 0;
this.questions = questions;
this.questionIndex = 0;
}
Quiz.prototype.getQuestionIndex = function (){
return this.questions[this.questionIndex];
}
Quiz.prototype.isEnded = function (){
return this.questions.length === this.questionIndex;
}
Quiz.prototype.guess = function(answer) {
if(this.getQuestionIndex().correctAnswer(answer)) {
this.score++;
}
this.questionIndex++;
}
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset="UTF-8">
<title>Quiz</title>
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
<div class ="grid">
<div id="quiz">
<h1>Quiz</h1>
<hr style="margin-bottom: 20px">
<p id="question"></p>
<div class="buttons">
<button id="btn0"><span id="choice0"></span></button>
<button id="btn1"><span id="choice1"></span></button>
<button id="btn2"><span id="choice2"></span></button>
<button id="btn3"><span id="choice3"></span></button>
</div>
<hr style="margin-top: 50px">
<footer>
<p id="progress">Question x of y.</p>
</footer>
</div>
</div>
<script src="quiz_controller.js"></script>
<script src="question.js"></script>
<script src="app.js"></script>
</body>
</html>
---------------------------
body{
background-color: #eeeeee;
}
.grid{
width: 600px;
height: 500px;
margin: 0 auto;
background-color: #fff;
padding: 10px 50px 50px 50px;
border-radius: 50px;
border: 2px solid #cbcbcb;
box-shadow: 10px 15px 5px #cbcbcb;
}
.grid h1 {
font-family: sans-serif;
background-color: #57636e;
font-size: 60px;
text-align: center;
color: #fff;
padding: 2px 0px;
border-radius: 50px;
}
.grid #question{
font-family: sans-serif;
font-size: 30px;
color: #5a6772
}
.buttons{
margin-top: 30px;
}
#btn0, #btn1, #btn2, #btn3{
background-color: #778897;
width: 250px;
font-size: 20px;
color: #fff;
border: 1px solid #1d3c6a;
border-radius: 50px;
margin: 10px 40px 10px 0px;
padding: 10px 10px;
}
#score {
color: #5A6772;
text-align:center;
font-size: 30px;
}
#progress{
color: #2b2b2b;
font-size: 18px;
}
#btn0:hover, #btn1:hover, #btn2:hover, #btn3:hover{
cursor: pointer;
background-color: #57636e;
}
#btn0:focus, #btn1:focus, #btn2:focus, #btn3:focus{
outline: 0;
}
-------
function Question(text, choices, answer){
this.text=text;
this.choices = choices;
this.answer = answer;
}
Question.prototype.correctAnswer = function (choice){
return choice === this.answer;
}
-------------
function populate(){
if (quiz.isEnded()) {
showScores();
}
else {
//show question
var element = document.getElementById("question");
element.innerHTML = quiz.getQuestionIndex().text;
//show choices
var choices = quiz.getQuestionIndex().choices;
for (var i = 0; i< choices.length; i++) {
var element = document.getElementById("choice" + i);
element.innerHTML = choices[i];
guess("btn" + i, choices[i]);
}
showProgress();
}
};
function guess(id, guess){
var button = document.getElementById(id);
button.onclick = function(){
quiz.guess();
populate();
}
};
function showProgress(){
var currentQuestionNumber = quiz.questionIndex + 1;
var element = document.getElementById("progress");
element.innerHTML = "Question" + currentQuestionNumber + "of" + quiz.questions.length;
};
function showScores(){
var gameOverHtml = "<h1>Result</h1>";
gameOverHtml += "<h2 id='score'>Your scores: "+ quiz.score +" </h2>";
var element = document.getElementById("quiz");
element.innerHTML = gameOverHtml;
};
var questions = [
new Question ("Which one is NOT an object oriented programming language?", ["Java", "C#", "C++", "C"], "C"),
new Question ("Which language is used for styling web pages?",["HTML", "JQuery", "CSS", "XMl"], "CSS" ),
new Question ("There are _______ main components of object oriented programming.",["1", "6", "2", "4" ], "4" ),
new Question ("Which language is used for web apps",["PHP", "Phyton", "Javascipt", "All"], "All" ),
new Question ("MVC is a ________.",["language", "library", "framework", "all"], "framework" )
];
var quiz = new Quiz(questions);
populate();
--------------
function Quiz (questions) {
this.score = 0;
this.questions = questions;
this.questionIndex = 0;
}
Quiz.prototype.getQuestionIndex = function (){
return this.questions[this.questionIndex];
}
Quiz.prototype.isEnded = function (){
return this.questions.length === this.questionIndex;
}
Quiz.prototype.guess = function(answer) {
if(this.getQuestionIndex().correctAnswer(answer)) {
this.score++;
}
this.questionIndex++;
}