Simple JavaScript quiz application with radio buttons
3
I've created a simple JavaScript application, which also happens to be my first-ever piece of code in any programming language.It took me two days to get the core correct and another two days for styling and the progress bar.
I'll be adding subsequent features to this quiz, as I continue to learn more and more about the language.
var allQuestions = [{
question: "Before Mt. Everest was discovered, whaich mountain was considered to be the highest mountain in the world?",
choices: ["Mt. Kilimanjaro", "Kanchenjunga", "Mount Everest"],
correctAnswer: 1
},
{
question: "Does England have a 4th of July?",
choices: ["Yes", "No", "I don't know"],
correctAnswer: 0
},
{
question: "What is Rupert the bear's middle name?",
choices: ["Bear", "He doesn't have one!", "The", "Rupert"],
correctAnswer: 2
},
{
question: " What can you never eat for breakfast? ",
choices: ["Dinner", "Something sugary", "Lunch", "Supper"],
correctAnswer: 0
},
{
question: "If there are three apples and you took two away, how many do you have?",
choices: ["One", "Two", "None"],
correctAnswer: 1
},
{
question: "Spell 'Silk' out loud, 3 times in a row. What do cows drink?",
choices: ["Milk", "Water", "Juice", "Cows can't drink"],
correctAnswer: 1
},
{
question: "Which is heavier, 100 pounds of rocks or 100 pounds of gold? ",
choices: ["100 pounds of rocks", "100 pounds of rocks", "They weigh the same"],
correctAnswer: 2
},
{
question: "Can you spell 80 in two letters?",
choices: ["AI-TY", "It's not possible", "EIGH-TY", "A-T"],
correctAnswer: 3
},
{
question: "What question must always be answered ''Yes''?",
choices: ["What does Y-E-S spell?", "Will everyone die someday?", "Does everyone have a biological mother?", "Are you a human?"],
correctAnswer: 0
},
{
question: "How many sides does a circle have?",
choices: ["The back", "None. It's a circle", "Two", "Four"],
correctAnswer: 2
},
{
question: "What has a tail but no body?",
choices: ["A human", "A coin", "A cloud"],
correctAnswer: 1
},
{
question: "What word in the English language is always spelled incorrectly?",
choices: ["It's possible to spell anything right as long as you learn it", "Shakespeare", "Onomatopoeia", "Incorrectly"],
correctAnswer: 3
},
{
question: "When do you stop at green and go at red?",
choices: ["Watermelon!", "Traffic light!", "Garden"],
correctAnswer: 0
},
{
question: "What rotates but still remains in the same place?",
choices: ["Bottle (spin the bottle game)", "Clock", "Stairs"],
correctAnswer: 2
},
{
question: "How can you lift an elephant with one hand?",
choices: ["Truck", "Use both hands!", "Use a lever", "There is no such thing"],
correctAnswer: 3
}
];
var currentquestion = 0;
var correctAnswers = 0;
function setupOptions() {
$('#question').html(parseInt(currentquestion) + 1 + ". " + allQuestions[currentquestion].question);
var options = allQuestions[currentquestion].choices;
var formHtml = '';
for (var i = 0; i < options.length; i++) {
formHtml += '<div><input type="radio" name="option" value="' + i + '" id="option' + i + '"><label for="option' + i + '">' +
allQuestions[currentquestion].choices[i] + '</label></div><br/>';
}
$('#form').html(formHtml);
$("#option0").prop('checked', true);
};
function checkAns() {
if ($("input[name=option]:checked").val() == allQuestions[currentquestion].correctAnswer) {
correctAnswers++;
};
};
$(document).ready(function() {
$(".jumbotron").hide();
$('#start').click(function() {
$(".jumbotron").fadeIn();
$(this).hide();
});
$(function() {
$("#progressbar").progressbar({
max: allQuestions.length - 1,
value: 0
});
});
setupOptions();
$("#next").click(function() {
event.preventDefault();
checkAns();
currentquestion++;
$(function() {
$("#progressbar").progressbar({
value: currentquestion
});
});
if (currentquestion < allQuestions.length) {
setupOptions();
if (currentquestion == allQuestions.length - 1) {
$('#next').html("Submit");
$('#next').click(function() {
$(".jumbotron").hide();
$("#result").html("You correctly answered " + correctAnswers + " out of " + currentquestion + " questions! ").hide();
$("#result").fadeIn(1500);
});
};
};
});
});html, body, div, span, object, iframe, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
margin:0;
padding:0;
border:0;
outline:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
}
body {
line-height:1;
}
article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section {
display:block;
}
nav ul {
list-style:none;
}
blockquote, q {
quotes:none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content:'';
content:none;
}
/*end of default style resetting*/
h1 {
font-size: 20vw;
font-family: 'Chonburi', cursive;
}
.ui-widget-header {
background-image: none !important;
background-color: #2ECC71 !important;
}
label{
display: inline;
}
h3, #next {
text-align: center;
display: inline-block;
border-radius: 10%;
}
#result {
font-family: 'Press Start 2P', cursive !important;
font-weight: bold;
font-size: 1.5em;
color: #036;
}
input[name="option"] {
float:left;
}
#form div{
margin:auto;
max-width: 205px;
}
#progressbar {
margin: auto;
margin-top: 20px;
float: none;
width: 50%;
}
#container {
text-align: center;
}
input, select {
vertical-align:middle;
}
.button {
display: inline-block;
padding: 1em;
background-color: #79BD9A;
text-decoration: none !important;
color: white !important;
}
body{
text-align: center;
}
.progress-bar {
float: left;
width: 0;
/*height: 100%;*/
font-size: 12px;
line-height: 20px;
color: #fff;
text-align: center;
background-color: #337ab7;
-webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .15);
box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .15);
-webkit-transition: width .6s ease;
-o-transition: width .6s ease;
transition: width .6s ease;
}<script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<link href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script>
<h1>Quiz</h1>
<br/>
<br/>
<a href="#" id="start" class="btn btn-primary btn-lg">Let's Begin</a>
<br/>
<div class="well jumbotron">
<h3 id="question"></h3>
<br/><br/>
<form id="form">
</form>
<br/>
<a href="#" id="next" class="button">Next</a><br/>
<div id="progressbar" class="progress-bar progress-bar-striped"></div>
</div>
<div id="result"></div>To have a better a look at the final product checkout: Codepen.
I would like to know your views on my code, and ways in which I can make it better.
javascript jquery css html5 twitter-bootstrap
edited Mar 14 '16 at 22:19
Jamal♦
30.2k11116226
asked Mar 14 '16 at 16:31
Rashid
18116
add a comment |
3
I've created a simple JavaScript application, which also happens to be my first-ever piece of code in any programming language.It took me two days to get the core correct and another two days for styling and the progress bar.
I'll be adding subsequent features to this quiz, as I continue to learn more and more about the language.
var allQuestions = [{
question: "Before Mt. Everest was discovered, whaich mountain was considered to be the highest mountain in the world?",
choices: ["Mt. Kilimanjaro", "Kanchenjunga", "Mount Everest"],
correctAnswer: 1
},
{
question: "Does England have a 4th of July?",
choices: ["Yes", "No", "I don't know"],
correctAnswer: 0
},
{
question: "What is Rupert the bear's middle name?",
choices: ["Bear", "He doesn't have one!", "The", "Rupert"],
correctAnswer: 2
},
{
question: " What can you never eat for breakfast? ",
choices: ["Dinner", "Something sugary", "Lunch", "Supper"],
correctAnswer: 0
},
{
question: "If there are three apples and you took two away, how many do you have?",
choices: ["One", "Two", "None"],
correctAnswer: 1
},
{
question: "Spell 'Silk' out loud, 3 times in a row. What do cows drink?",
choices: ["Milk", "Water", "Juice", "Cows can't drink"],
correctAnswer: 1
},
{
question: "Which is heavier, 100 pounds of rocks or 100 pounds of gold? ",
choices: ["100 pounds of rocks", "100 pounds of rocks", "They weigh the same"],
correctAnswer: 2
},
{
question: "Can you spell 80 in two letters?",
choices: ["AI-TY", "It's not possible", "EIGH-TY", "A-T"],
correctAnswer: 3
},
{
question: "What question must always be answered ''Yes''?",
choices: ["What does Y-E-S spell?", "Will everyone die someday?", "Does everyone have a biological mother?", "Are you a human?"],
correctAnswer: 0
},
{
question: "How many sides does a circle have?",
choices: ["The back", "None. It's a circle", "Two", "Four"],
correctAnswer: 2
},
{
question: "What has a tail but no body?",
choices: ["A human", "A coin", "A cloud"],
correctAnswer: 1
},
{
question: "What word in the English language is always spelled incorrectly?",
choices: ["It's possible to spell anything right as long as you learn it", "Shakespeare", "Onomatopoeia", "Incorrectly"],
correctAnswer: 3
},
{
question: "When do you stop at green and go at red?",
choices: ["Watermelon!", "Traffic light!", "Garden"],
correctAnswer: 0
},
{
question: "What rotates but still remains in the same place?",
choices: ["Bottle (spin the bottle game)", "Clock", "Stairs"],
correctAnswer: 2
},
{
question: "How can you lift an elephant with one hand?",
choices: ["Truck", "Use both hands!", "Use a lever", "There is no such thing"],
correctAnswer: 3
}
];
var currentquestion = 0;
var correctAnswers = 0;
function setupOptions() {
$('#question').html(parseInt(currentquestion) + 1 + ". " + allQuestions[currentquestion].question);
var options = allQuestions[currentquestion].choices;
var formHtml = '';
for (var i = 0; i < options.length; i++) {
formHtml += '<div><input type="radio" name="option" value="' + i + '" id="option' + i + '"><label for="option' + i + '">' +
allQuestions[currentquestion].choices[i] + '</label></div><br/>';
}
$('#form').html(formHtml);
$("#option0").prop('checked', true);
};
function checkAns() {
if ($("input[name=option]:checked").val() == allQuestions[currentquestion].correctAnswer) {
correctAnswers++;
};
};
$(document).ready(function() {
$(".jumbotron").hide();
$('#start').click(function() {
$(".jumbotron").fadeIn();
$(this).hide();
});
$(function() {
$("#progressbar").progressbar({
max: allQuestions.length - 1,
value: 0
});
});
setupOptions();
$("#next").click(function() {
event.preventDefault();
checkAns();
currentquestion++;
$(function() {
$("#progressbar").progressbar({
value: currentquestion
});
});
if (currentquestion < allQuestions.length) {
setupOptions();
if (currentquestion == allQuestions.length - 1) {
$('#next').html("Submit");
$('#next').click(function() {
$(".jumbotron").hide();
$("#result").html("You correctly answered " + correctAnswers + " out of " + currentquestion + " questions! ").hide();
$("#result").fadeIn(1500);
});
};
};
});
});html, body, div, span, object, iframe, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
margin:0;
padding:0;
border:0;
outline:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
}
body {
line-height:1;
}
article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section {
display:block;
}
nav ul {
list-style:none;
}
blockquote, q {
quotes:none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content:'';
content:none;
}
/*end of default style resetting*/
h1 {
font-size: 20vw;
font-family: 'Chonburi', cursive;
}
.ui-widget-header {
background-image: none !important;
background-color: #2ECC71 !important;
}
label{
display: inline;
}
h3, #next {
text-align: center;
display: inline-block;
border-radius: 10%;
}
#result {
font-family: 'Press Start 2P', cursive !important;
font-weight: bold;
font-size: 1.5em;
color: #036;
}
input[name="option"] {
float:left;
}
#form div{
margin:auto;
max-width: 205px;
}
#progressbar {
margin: auto;
margin-top: 20px;
float: none;
width: 50%;
}
#container {
text-align: center;
}
input, select {
vertical-align:middle;
}
.button {
display: inline-block;
padding: 1em;
background-color: #79BD9A;
text-decoration: none !important;
color: white !important;
}
body{
text-align: center;
}
.progress-bar {
float: left;
width: 0;
/*height: 100%;*/
font-size: 12px;
line-height: 20px;
color: #fff;
text-align: center;
background-color: #337ab7;
-webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .15);
box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .15);
-webkit-transition: width .6s ease;
-o-transition: width .6s ease;
transition: width .6s ease;
}<script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<link href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script>
<h1>Quiz</h1>
<br/>
<br/>
<a href="#" id="start" class="btn btn-primary btn-lg">Let's Begin</a>
<br/>
<div class="well jumbotron">
<h3 id="question"></h3>
<br/><br/>
<form id="form">
</form>
<br/>
<a href="#" id="next" class="button">Next</a><br/>
<div id="progressbar" class="progress-bar progress-bar-striped"></div>
</div>
<div id="result"></div>To have a better a look at the final product checkout: Codepen.
I would like to know your views on my code, and ways in which I can make it better.
javascript jquery css html5 twitter-bootstrap
edited Mar 14 '16 at 22:19
Jamal♦
30.2k11116226
asked Mar 14 '16 at 16:31
Rashid
18116
Add code using {} in editor in question itself.
– Navoneel
Mar 14 '16 at 17:29
@AlienHerbNite didn't know that..still a beginner both at programming as well as at stackoverflow.
– Rashid
Mar 14 '16 at 17:46
@tunaki thanks for editing the question!
– Rashid
Mar 14 '16 at 17:47
@Rashid No worries! As long as your code is always embedded directly into your question it's fine. Welcome to Code Review! :)
– Ethan Bierlein
Mar 14 '16 at 17:47
add a comment |
3
3
3
1
I've created a simple JavaScript application, which also happens to be my first-ever piece of code in any programming language.It took me two days to get the core correct and another two days for styling and the progress bar.
I'll be adding subsequent features to this quiz, as I continue to learn more and more about the language.
var allQuestions = [{
question: "Before Mt. Everest was discovered, whaich mountain was considered to be the highest mountain in the world?",
choices: ["Mt. Kilimanjaro", "Kanchenjunga", "Mount Everest"],
correctAnswer: 1
},
{
question: "Does England have a 4th of July?",
choices: ["Yes", "No", "I don't know"],
correctAnswer: 0
},
{
question: "What is Rupert the bear's middle name?",
choices: ["Bear", "He doesn't have one!", "The", "Rupert"],
correctAnswer: 2
},
{
question: " What can you never eat for breakfast? ",
choices: ["Dinner", "Something sugary", "Lunch", "Supper"],
correctAnswer: 0
},
{
question: "If there are three apples and you took two away, how many do you have?",
choices: ["One", "Two", "None"],
correctAnswer: 1
},
{
question: "Spell 'Silk' out loud, 3 times in a row. What do cows drink?",
choices: ["Milk", "Water", "Juice", "Cows can't drink"],
correctAnswer: 1
},
{
question: "Which is heavier, 100 pounds of rocks or 100 pounds of gold? ",
choices: ["100 pounds of rocks", "100 pounds of rocks", "They weigh the same"],
correctAnswer: 2
},
{
question: "Can you spell 80 in two letters?",
choices: ["AI-TY", "It's not possible", "EIGH-TY", "A-T"],
correctAnswer: 3
},
{
question: "What question must always be answered ''Yes''?",
choices: ["What does Y-E-S spell?", "Will everyone die someday?", "Does everyone have a biological mother?", "Are you a human?"],
correctAnswer: 0
},
{
question: "How many sides does a circle have?",
choices: ["The back", "None. It's a circle", "Two", "Four"],
correctAnswer: 2
},
{
question: "What has a tail but no body?",
choices: ["A human", "A coin", "A cloud"],
correctAnswer: 1
},
{
question: "What word in the English language is always spelled incorrectly?",
choices: ["It's possible to spell anything right as long as you learn it", "Shakespeare", "Onomatopoeia", "Incorrectly"],
correctAnswer: 3
},
{
question: "When do you stop at green and go at red?",
choices: ["Watermelon!", "Traffic light!", "Garden"],
correctAnswer: 0
},
{
question: "What rotates but still remains in the same place?",
choices: ["Bottle (spin the bottle game)", "Clock", "Stairs"],
correctAnswer: 2
},
{
question: "How can you lift an elephant with one hand?",
choices: ["Truck", "Use both hands!", "Use a lever", "There is no such thing"],
correctAnswer: 3
}
];
var currentquestion = 0;
var correctAnswers = 0;
function setupOptions() {
$('#question').html(parseInt(currentquestion) + 1 + ". " + allQuestions[currentquestion].question);
var options = allQuestions[currentquestion].choices;
var formHtml = '';
for (var i = 0; i < options.length; i++) {
formHtml += '<div><input type="radio" name="option" value="' + i + '" id="option' + i + '"><label for="option' + i + '">' +
allQuestions[currentquestion].choices[i] + '</label></div><br/>';
}
$('#form').html(formHtml);
$("#option0").prop('checked', true);
};
function checkAns() {
if ($("input[name=option]:checked").val() == allQuestions[currentquestion].correctAnswer) {
correctAnswers++;
};
};
$(document).ready(function() {
$(".jumbotron").hide();
$('#start').click(function() {
$(".jumbotron").fadeIn();
$(this).hide();
});
$(function() {
$("#progressbar").progressbar({
max: allQuestions.length - 1,
value: 0
});
});
setupOptions();
$("#next").click(function() {
event.preventDefault();
checkAns();
currentquestion++;
$(function() {
$("#progressbar").progressbar({
value: currentquestion
});
});
if (currentquestion < allQuestions.length) {
setupOptions();
if (currentquestion == allQuestions.length - 1) {
$('#next').html("Submit");
$('#next').click(function() {
$(".jumbotron").hide();
$("#result").html("You correctly answered " + correctAnswers + " out of " + currentquestion + " questions! ").hide();
$("#result").fadeIn(1500);
});
};
};
});
});html, body, div, span, object, iframe, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
margin:0;
padding:0;
border:0;
outline:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
}
body {
line-height:1;
}
article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section {
display:block;
}
nav ul {
list-style:none;
}
blockquote, q {
quotes:none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content:'';
content:none;
}
/*end of default style resetting*/
h1 {
font-size: 20vw;
font-family: 'Chonburi', cursive;
}
.ui-widget-header {
background-image: none !important;
background-color: #2ECC71 !important;
}
label{
display: inline;
}
h3, #next {
text-align: center;
display: inline-block;
border-radius: 10%;
}
#result {
font-family: 'Press Start 2P', cursive !important;
font-weight: bold;
font-size: 1.5em;
color: #036;
}
input[name="option"] {
float:left;
}
#form div{
margin:auto;
max-width: 205px;
}
#progressbar {
margin: auto;
margin-top: 20px;
float: none;
width: 50%;
}
#container {
text-align: center;
}
input, select {
vertical-align:middle;
}
.button {
display: inline-block;
padding: 1em;
background-color: #79BD9A;
text-decoration: none !important;
color: white !important;
}
body{
text-align: center;
}
.progress-bar {
float: left;
width: 0;
/*height: 100%;*/
font-size: 12px;
line-height: 20px;
color: #fff;
text-align: center;
background-color: #337ab7;
-webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .15);
box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .15);
-webkit-transition: width .6s ease;
-o-transition: width .6s ease;
transition: width .6s ease;
}<script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<link href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script>
<h1>Quiz</h1>
<br/>
<br/>
<a href="#" id="start" class="btn btn-primary btn-lg">Let's Begin</a>
<br/>
<div class="well jumbotron">
<h3 id="question"></h3>
<br/><br/>
<form id="form">
</form>
<br/>
<a href="#" id="next" class="button">Next</a><br/>
<div id="progressbar" class="progress-bar progress-bar-striped"></div>
</div>
<div id="result"></div>To have a better a look at the final product checkout: Codepen.
I would like to know your views on my code, and ways in which I can make it better.
javascript jquery css html5 twitter-bootstrap
edited Mar 14 '16 at 22:19
Jamal♦
30.2k11116226
asked Mar 14 '16 at 16:31
Rashid
18116
I've created a simple JavaScript application, which also happens to be my first-ever piece of code in any programming language.It took me two days to get the core correct and another two days for styling and the progress bar.
I'll be adding subsequent features to this quiz, as I continue to learn more and more about the language.
var allQuestions = [{
question: "Before Mt. Everest was discovered, whaich mountain was considered to be the highest mountain in the world?",
choices: ["Mt. Kilimanjaro", "Kanchenjunga", "Mount Everest"],
correctAnswer: 1
},
{
question: "Does England have a 4th of July?",
choices: ["Yes", "No", "I don't know"],
correctAnswer: 0
},
{
question: "What is Rupert the bear's middle name?",
choices: ["Bear", "He doesn't have one!", "The", "Rupert"],
correctAnswer: 2
},
{
question: " What can you never eat for breakfast? ",
choices: ["Dinner", "Something sugary", "Lunch", "Supper"],
correctAnswer: 0
},
{
question: "If there are three apples and you took two away, how many do you have?",
choices: ["One", "Two", "None"],
correctAnswer: 1
},
{
question: "Spell 'Silk' out loud, 3 times in a row. What do cows drink?",
choices: ["Milk", "Water", "Juice", "Cows can't drink"],
correctAnswer: 1
},
{
question: "Which is heavier, 100 pounds of rocks or 100 pounds of gold? ",
choices: ["100 pounds of rocks", "100 pounds of rocks", "They weigh the same"],
correctAnswer: 2
},
{
question: "Can you spell 80 in two letters?",
choices: ["AI-TY", "It's not possible", "EIGH-TY", "A-T"],
correctAnswer: 3
},
{
question: "What question must always be answered ''Yes''?",
choices: ["What does Y-E-S spell?", "Will everyone die someday?", "Does everyone have a biological mother?", "Are you a human?"],
correctAnswer: 0
},
{
question: "How many sides does a circle have?",
choices: ["The back", "None. It's a circle", "Two", "Four"],
correctAnswer: 2
},
{
question: "What has a tail but no body?",
choices: ["A human", "A coin", "A cloud"],
correctAnswer: 1
},
{
question: "What word in the English language is always spelled incorrectly?",
choices: ["It's possible to spell anything right as long as you learn it", "Shakespeare", "Onomatopoeia", "Incorrectly"],
correctAnswer: 3
},
{
question: "When do you stop at green and go at red?",
choices: ["Watermelon!", "Traffic light!", "Garden"],
correctAnswer: 0
},
{
question: "What rotates but still remains in the same place?",
choices: ["Bottle (spin the bottle game)", "Clock", "Stairs"],
correctAnswer: 2
},
{
question: "How can you lift an elephant with one hand?",
choices: ["Truck", "Use both hands!", "Use a lever", "There is no such thing"],
correctAnswer: 3
}
];
var currentquestion = 0;
var correctAnswers = 0;
function setupOptions() {
$('#question').html(parseInt(currentquestion) + 1 + ". " + allQuestions[currentquestion].question);
var options = allQuestions[currentquestion].choices;
var formHtml = '';
for (var i = 0; i < options.length; i++) {
formHtml += '<div><input type="radio" name="option" value="' + i + '" id="option' + i + '"><label for="option' + i + '">' +
allQuestions[currentquestion].choices[i] + '</label></div><br/>';
}
$('#form').html(formHtml);
$("#option0").prop('checked', true);
};
function checkAns() {
if ($("input[name=option]:checked").val() == allQuestions[currentquestion].correctAnswer) {
correctAnswers++;
};
};
$(document).ready(function() {
$(".jumbotron").hide();
$('#start').click(function() {
$(".jumbotron").fadeIn();
$(this).hide();
});
$(function() {
$("#progressbar").progressbar({
max: allQuestions.length - 1,
value: 0
});
});
setupOptions();
$("#next").click(function() {
event.preventDefault();
checkAns();
currentquestion++;
$(function() {
$("#progressbar").progressbar({
value: currentquestion
});
});
if (currentquestion < allQuestions.length) {
setupOptions();
if (currentquestion == allQuestions.length - 1) {
$('#next').html("Submit");
$('#next').click(function() {
$(".jumbotron").hide();
$("#result").html("You correctly answered " + correctAnswers + " out of " + currentquestion + " questions! ").hide();
$("#result").fadeIn(1500);
});
};
};
});
});html, body, div, span, object, iframe, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
margin:0;
padding:0;
border:0;
outline:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
}
body {
line-height:1;
}
article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section {
display:block;
}
nav ul {
list-style:none;
}
blockquote, q {
quotes:none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content:'';
content:none;
}
/*end of default style resetting*/
h1 {
font-size: 20vw;
font-family: 'Chonburi', cursive;
}
.ui-widget-header {
background-image: none !important;
background-color: #2ECC71 !important;
}
label{
display: inline;
}
h3, #next {
text-align: center;
display: inline-block;
border-radius: 10%;
}
#result {
font-family: 'Press Start 2P', cursive !important;
font-weight: bold;
font-size: 1.5em;
color: #036;
}
input[name="option"] {
float:left;
}
#form div{
margin:auto;
max-width: 205px;
}
#progressbar {
margin: auto;
margin-top: 20px;
float: none;
width: 50%;
}
#container {
text-align: center;
}
input, select {
vertical-align:middle;
}
.button {
display: inline-block;
padding: 1em;
background-color: #79BD9A;
text-decoration: none !important;
color: white !important;
}
body{
text-align: center;
}
.progress-bar {
float: left;
width: 0;
/*height: 100%;*/
font-size: 12px;
line-height: 20px;
color: #fff;
text-align: center;
background-color: #337ab7;
-webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .15);
box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .15);
-webkit-transition: width .6s ease;
-o-transition: width .6s ease;
transition: width .6s ease;
}<script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<link href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script>
<h1>Quiz</h1>
<br/>
<br/>
<a href="#" id="start" class="btn btn-primary btn-lg">Let's Begin</a>
<br/>
<div class="well jumbotron">
<h3 id="question"></h3>
<br/><br/>
<form id="form">
</form>
<br/>
<a href="#" id="next" class="button">Next</a><br/>
<div id="progressbar" class="progress-bar progress-bar-striped"></div>
</div>
<div id="result"></div>To have a better a look at the final product checkout: Codepen.
I would like to know your views on my code, and ways in which I can make it better.
var allQuestions = [{
question: "Before Mt. Everest was discovered, whaich mountain was considered to be the highest mountain in the world?",
choices: ["Mt. Kilimanjaro", "Kanchenjunga", "Mount Everest"],
correctAnswer: 1
},
{
question: "Does England have a 4th of July?",
choices: ["Yes", "No", "I don't know"],
correctAnswer: 0
},
{
question: "What is Rupert the bear's middle name?",
choices: ["Bear", "He doesn't have one!", "The", "Rupert"],
correctAnswer: 2
},
{
question: " What can you never eat for breakfast? ",
choices: ["Dinner", "Something sugary", "Lunch", "Supper"],
correctAnswer: 0
},
{
question: "If there are three apples and you took two away, how many do you have?",
choices: ["One", "Two", "None"],
correctAnswer: 1
},
{
question: "Spell 'Silk' out loud, 3 times in a row. What do cows drink?",
choices: ["Milk", "Water", "Juice", "Cows can't drink"],
correctAnswer: 1
},
{
question: "Which is heavier, 100 pounds of rocks or 100 pounds of gold? ",
choices: ["100 pounds of rocks", "100 pounds of rocks", "They weigh the same"],
correctAnswer: 2
},
{
question: "Can you spell 80 in two letters?",
choices: ["AI-TY", "It's not possible", "EIGH-TY", "A-T"],
correctAnswer: 3
},
{
question: "What question must always be answered ''Yes''?",
choices: ["What does Y-E-S spell?", "Will everyone die someday?", "Does everyone have a biological mother?", "Are you a human?"],
correctAnswer: 0
},
{
question: "How many sides does a circle have?",
choices: ["The back", "None. It's a circle", "Two", "Four"],
correctAnswer: 2
},
{
question: "What has a tail but no body?",
choices: ["A human", "A coin", "A cloud"],
correctAnswer: 1
},
{
question: "What word in the English language is always spelled incorrectly?",
choices: ["It's possible to spell anything right as long as you learn it", "Shakespeare", "Onomatopoeia", "Incorrectly"],
correctAnswer: 3
},
{
question: "When do you stop at green and go at red?",
choices: ["Watermelon!", "Traffic light!", "Garden"],
correctAnswer: 0
},
{
question: "What rotates but still remains in the same place?",
choices: ["Bottle (spin the bottle game)", "Clock", "Stairs"],
correctAnswer: 2
},
{
question: "How can you lift an elephant with one hand?",
choices: ["Truck", "Use both hands!", "Use a lever", "There is no such thing"],
correctAnswer: 3
}
];
var currentquestion = 0;
var correctAnswers = 0;
function setupOptions() {
$('#question').html(parseInt(currentquestion) + 1 + ". " + allQuestions[currentquestion].question);
var options = allQuestions[currentquestion].choices;
var formHtml = '';
for (var i = 0; i < options.length; i++) {
formHtml += '<div><input type="radio" name="option" value="' + i + '" id="option' + i + '"><label for="option' + i + '">' +
allQuestions[currentquestion].choices[i] + '</label></div><br/>';
}
$('#form').html(formHtml);
$("#option0").prop('checked', true);
};
function checkAns() {
if ($("input[name=option]:checked").val() == allQuestions[currentquestion].correctAnswer) {
correctAnswers++;
};
};
$(document).ready(function() {
$(".jumbotron").hide();
$('#start').click(function() {
$(".jumbotron").fadeIn();
$(this).hide();
});
$(function() {
$("#progressbar").progressbar({
max: allQuestions.length - 1,
value: 0
});
});
setupOptions();
$("#next").click(function() {
event.preventDefault();
checkAns();
currentquestion++;
$(function() {
$("#progressbar").progressbar({
value: currentquestion
});
});
if (currentquestion < allQuestions.length) {
setupOptions();
if (currentquestion == allQuestions.length - 1) {
$('#next').html("Submit");
$('#next').click(function() {
$(".jumbotron").hide();
$("#result").html("You correctly answered " + correctAnswers + " out of " + currentquestion + " questions! ").hide();
$("#result").fadeIn(1500);
});
};
};
});
});html, body, div, span, object, iframe, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
margin:0;
padding:0;
border:0;
outline:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
}
body {
line-height:1;
}
article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section {
display:block;
}
nav ul {
list-style:none;
}
blockquote, q {
quotes:none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content:'';
content:none;
}
/*end of default style resetting*/
h1 {
font-size: 20vw;
font-family: 'Chonburi', cursive;
}
.ui-widget-header {
background-image: none !important;
background-color: #2ECC71 !important;
}
label{
display: inline;
}
h3, #next {
text-align: center;
display: inline-block;
border-radius: 10%;
}
#result {
font-family: 'Press Start 2P', cursive !important;
font-weight: bold;
font-size: 1.5em;
color: #036;
}
input[name="option"] {
float:left;
}
#form div{
margin:auto;
max-width: 205px;
}
#progressbar {
margin: auto;
margin-top: 20px;
float: none;
width: 50%;
}
#container {
text-align: center;
}
input, select {
vertical-align:middle;
}
.button {
display: inline-block;
padding: 1em;
background-color: #79BD9A;
text-decoration: none !important;
color: white !important;
}
body{
text-align: center;
}
.progress-bar {
float: left;
width: 0;
/*height: 100%;*/
font-size: 12px;
line-height: 20px;
color: #fff;
text-align: center;
background-color: #337ab7;
-webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .15);
box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .15);
-webkit-transition: width .6s ease;
-o-transition: width .6s ease;
transition: width .6s ease;
}<script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<link href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script>
<h1>Quiz</h1>
<br/>
<br/>
<a href="#" id="start" class="btn btn-primary btn-lg">Let's Begin</a>
<br/>
<div class="well jumbotron">
<h3 id="question"></h3>
<br/><br/>
<form id="form">
</form>
<br/>
<a href="#" id="next" class="button">Next</a><br/>
<div id="progressbar" class="progress-bar progress-bar-striped"></div>
</div>
<div id="result"></div>var allQuestions = [{
question: "Before Mt. Everest was discovered, whaich mountain was considered to be the highest mountain in the world?",
choices: ["Mt. Kilimanjaro", "Kanchenjunga", "Mount Everest"],
correctAnswer: 1
},
{
question: "Does England have a 4th of July?",
choices: ["Yes", "No", "I don't know"],
correctAnswer: 0
},
{
question: "What is Rupert the bear's middle name?",
choices: ["Bear", "He doesn't have one!", "The", "Rupert"],
correctAnswer: 2
},
{
question: " What can you never eat for breakfast? ",
choices: ["Dinner", "Something sugary", "Lunch", "Supper"],
correctAnswer: 0
},
{
question: "If there are three apples and you took two away, how many do you have?",
choices: ["One", "Two", "None"],
correctAnswer: 1
},
{
question: "Spell 'Silk' out loud, 3 times in a row. What do cows drink?",
choices: ["Milk", "Water", "Juice", "Cows can't drink"],
correctAnswer: 1
},
{
question: "Which is heavier, 100 pounds of rocks or 100 pounds of gold? ",
choices: ["100 pounds of rocks", "100 pounds of rocks", "They weigh the same"],
correctAnswer: 2
},
{
question: "Can you spell 80 in two letters?",
choices: ["AI-TY", "It's not possible", "EIGH-TY", "A-T"],
correctAnswer: 3
},
{
question: "What question must always be answered ''Yes''?",
choices: ["What does Y-E-S spell?", "Will everyone die someday?", "Does everyone have a biological mother?", "Are you a human?"],
correctAnswer: 0
},
{
question: "How many sides does a circle have?",
choices: ["The back", "None. It's a circle", "Two", "Four"],
correctAnswer: 2
},
{
question: "What has a tail but no body?",
choices: ["A human", "A coin", "A cloud"],
correctAnswer: 1
},
{
question: "What word in the English language is always spelled incorrectly?",
choices: ["It's possible to spell anything right as long as you learn it", "Shakespeare", "Onomatopoeia", "Incorrectly"],
correctAnswer: 3
},
{
question: "When do you stop at green and go at red?",
choices: ["Watermelon!", "Traffic light!", "Garden"],
correctAnswer: 0
},
{
question: "What rotates but still remains in the same place?",
choices: ["Bottle (spin the bottle game)", "Clock", "Stairs"],
correctAnswer: 2
},
{
question: "How can you lift an elephant with one hand?",
choices: ["Truck", "Use both hands!", "Use a lever", "There is no such thing"],
correctAnswer: 3
}
];
var currentquestion = 0;
var correctAnswers = 0;
function setupOptions() {
$('#question').html(parseInt(currentquestion) + 1 + ". " + allQuestions[currentquestion].question);
var options = allQuestions[currentquestion].choices;
var formHtml = '';
for (var i = 0; i < options.length; i++) {
formHtml += '<div><input type="radio" name="option" value="' + i + '" id="option' + i + '"><label for="option' + i + '">' +
allQuestions[currentquestion].choices[i] + '</label></div><br/>';
}
$('#form').html(formHtml);
$("#option0").prop('checked', true);
};
function checkAns() {
if ($("input[name=option]:checked").val() == allQuestions[currentquestion].correctAnswer) {
correctAnswers++;
};
};
$(document).ready(function() {
$(".jumbotron").hide();
$('#start').click(function() {
$(".jumbotron").fadeIn();
$(this).hide();
});
$(function() {
$("#progressbar").progressbar({
max: allQuestions.length - 1,
value: 0
});
});
setupOptions();
$("#next").click(function() {
event.preventDefault();
checkAns();
currentquestion++;
$(function() {
$("#progressbar").progressbar({
value: currentquestion
});
});
if (currentquestion < allQuestions.length) {
setupOptions();
if (currentquestion == allQuestions.length - 1) {
$('#next').html("Submit");
$('#next').click(function() {
$(".jumbotron").hide();
$("#result").html("You correctly answered " + correctAnswers + " out of " + currentquestion + " questions! ").hide();
$("#result").fadeIn(1500);
});
};
};
});
});html, body, div, span, object, iframe, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
margin:0;
padding:0;
border:0;
outline:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
}
body {
line-height:1;
}
article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section {
display:block;
}
nav ul {
list-style:none;
}
blockquote, q {
quotes:none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content:'';
content:none;
}
/*end of default style resetting*/
h1 {
font-size: 20vw;
font-family: 'Chonburi', cursive;
}
.ui-widget-header {
background-image: none !important;
background-color: #2ECC71 !important;
}
label{
display: inline;
}
h3, #next {
text-align: center;
display: inline-block;
border-radius: 10%;
}
#result {
font-family: 'Press Start 2P', cursive !important;
font-weight: bold;
font-size: 1.5em;
color: #036;
}
input[name="option"] {
float:left;
}
#form div{
margin:auto;
max-width: 205px;
}
#progressbar {
margin: auto;
margin-top: 20px;
float: none;
width: 50%;
}
#container {
text-align: center;
}
input, select {
vertical-align:middle;
}
.button {
display: inline-block;
padding: 1em;
background-color: #79BD9A;
text-decoration: none !important;
color: white !important;
}
body{
text-align: center;
}
.progress-bar {
float: left;
width: 0;
/*height: 100%;*/
font-size: 12px;
line-height: 20px;
color: #fff;
text-align: center;
background-color: #337ab7;
-webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .15);
box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .15);
-webkit-transition: width .6s ease;
-o-transition: width .6s ease;
transition: width .6s ease;
}<script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<link href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script>
<h1>Quiz</h1>
<br/>
<br/>
<a href="#" id="start" class="btn btn-primary btn-lg">Let's Begin</a>
<br/>
<div class="well jumbotron">
<h3 id="question"></h3>
<br/><br/>
<form id="form">
</form>
<br/>
<a href="#" id="next" class="button">Next</a><br/>
<div id="progressbar" class="progress-bar progress-bar-striped"></div>
</div>
<div id="result"></div>javascript jquery css html5 twitter-bootstrap
javascript jquery css html5 twitter-bootstrap
edited Mar 14 '16 at 22:19
Jamal♦
30.2k11116226
asked Mar 14 '16 at 16:31
Rashid
18116
edited Mar 14 '16 at 22:19
Jamal♦
30.2k11116226
asked Mar 14 '16 at 16:31
Rashid
18116
edited Mar 14 '16 at 22:19
Jamal♦
30.2k11116226
edited Mar 14 '16 at 22:19
Jamal♦
30.2k11116226
edited Mar 14 '16 at 22:19
Jamal♦
30.2k11116226
30.2k11116226
asked Mar 14 '16 at 16:31
Rashid
18116
asked Mar 14 '16 at 16:31
Rashid
18116
asked Mar 14 '16 at 16:31
Rashid
18116
18116
Add code using {} in editor in question itself.
– Navoneel
Mar 14 '16 at 17:29
@AlienHerbNite didn't know that..still a beginner both at programming as well as at stackoverflow.
– Rashid
Mar 14 '16 at 17:46
@tunaki thanks for editing the question!
– Rashid
Mar 14 '16 at 17:47
@Rashid No worries! As long as your code is always embedded directly into your question it's fine. Welcome to Code Review! :)
– Ethan Bierlein
Mar 14 '16 at 17:47
add a comment |
Add code using {} in editor in question itself.
– Navoneel
Mar 14 '16 at 17:29
@AlienHerbNite didn't know that..still a beginner both at programming as well as at stackoverflow.
– Rashid
Mar 14 '16 at 17:46
@tunaki thanks for editing the question!
– Rashid
Mar 14 '16 at 17:47
@Rashid No worries! As long as your code is always embedded directly into your question it's fine. Welcome to Code Review! :)
– Ethan Bierlein
Mar 14 '16 at 17:47
Add code using {} in editor in question itself.
– Navoneel
Mar 14 '16 at 17:29
Add code using {} in editor in question itself.
– Navoneel
Mar 14 '16 at 17:29
@AlienHerbNite didn't know that..still a beginner both at programming as well as at stackoverflow.
– Rashid
Mar 14 '16 at 17:46
@AlienHerbNite didn't know that..still a beginner both at programming as well as at stackoverflow.
– Rashid
Mar 14 '16 at 17:46
@tunaki thanks for editing the question!
– Rashid
Mar 14 '16 at 17:47
@tunaki thanks for editing the question!
– Rashid
Mar 14 '16 at 17:47
@Rashid No worries! As long as your code is always embedded directly into your question it's fine. Welcome to Code Review! :)
– Ethan Bierlein
Mar 14 '16 at 17:47
@Rashid No worries! As long as your code is always embedded directly into your question it's fine. Welcome to Code Review! :)
– Ethan Bierlein
Mar 14 '16 at 17:47
add a comment |
1 Answer
1
active
oldest
votes
3
Object to class
Each object inside your allQuestions array follows the exact same "format":
{
question:
choices:
correctAnswer:
}
To make this simpler, we can extract a "class" from this so we can more easily store the questions. That might look like this:
function QuizQuesiton(question, choices, correctAnswer) {
this.question = question;
this.choices = choices;
this.correctAnswer = correctAnswer;
}
Now, when creating a question, we can simply instantiate this class like this:
new QuizQuestion("question", ["choices", "choices"], #);
Then, if you want to create an array of these, you can do this:
[
new QuizQuestion("question", ["choices", "choices"], #),
new QuizQuestion("question", ["choices", "choices"], #),
new QuizQuestion("question", ["choices", "choices"], #),
...
];
Simplification with variables
There are quite a few places where you could both simplify and speed up your code if you used variables to access repeated data.
For example, in:
$(document).ready(function() {
you could store
$(".jumbotron");$("#next");$("#result");
Then, you wouldn't have to access the DOM as much.
Also, here:
allQuestions[currentquestion].choices[i] + '</label></div><br/>';
Why not use that choices variable that you spent so much time creating?
Please show your ID - er, class, I mean
Check here:
...'" id="option' + i + '">...
This is not the point of IDs. IDs in HTML are meant for specific, unique, and special elements. If you have to create a bunch of elements that should all have the same ID and to circumvent it you are just sticking a number to the end of the ID, the you're doing something wrong.
Here, you should instead be using a class "options". Then, you can get all the elements with this class using
$(".options");
Then, you can use an index to target specific elements with this class.
answered Mar 14 '16 at 20:49
SirPython
11.9k32890
learnt quite some stuff today..thanks man ..I'm an absolute newbie..this was my first ever application and hell they don't teach these intricacies in Javascript books
– Rashid
Mar 15 '16 at 16:52
I'm unable to incorporate your first suggestion about object constructors, can you please explain how do I instantiate the class in thearray?
– Rashid
Mar 15 '16 at 16:55
@Rashid I've updated my post with an example. Hope it helps!
– SirPython
Mar 15 '16 at 20:27
still not there..this Is what I'm trying to do:function QuizQuestion(question, choices, correctAnswer){ this.question = question; this.choices = choices; this.correctAnswer = correctAnswer; }; var question1 = new QuizQuestion("Before Mt. Everest was discovered, which mountain was considered to be the highest mountain in the world?",["Mt. Kilimanjaro", "Kanchenjunga", "Mount Everest"],1); var allQuestions = [{ question1.question, question1.choices, question1.correctAnswer}] // I think I'm unable to add questions to the array correctly!
– Rashid
Mar 16 '16 at 6:01
@Rashid You are over-complicating it greatly. I've updated my post again.
– SirPython
Mar 16 '16 at 19:30
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
return StackExchange.using("mathjaxEditing", function () {
StackExchange.MarkdownEditor.creationCallbacks.add(function (editor, postfix) {
StackExchange.mathjaxEditing.prepareWmdForMathJax(editor, postfix, [["\$", "\$"]]);
});
});
}, "mathjax-editing");
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "196"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: false,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: null,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fcodereview.stackexchange.com%2fquestions%2f122837%2fsimple-javascript-quiz-application-with-radio-buttons%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
3
Object to class
Each object inside your allQuestions array follows the exact same "format":
{
question:
choices:
correctAnswer:
}
To make this simpler, we can extract a "class" from this so we can more easily store the questions. That might look like this:
function QuizQuesiton(question, choices, correctAnswer) {
this.question = question;
this.choices = choices;
this.correctAnswer = correctAnswer;
}
Now, when creating a question, we can simply instantiate this class like this:
new QuizQuestion("question", ["choices", "choices"], #);
Then, if you want to create an array of these, you can do this:
[
new QuizQuestion("question", ["choices", "choices"], #),
new QuizQuestion("question", ["choices", "choices"], #),
new QuizQuestion("question", ["choices", "choices"], #),
...
];
Simplification with variables
There are quite a few places where you could both simplify and speed up your code if you used variables to access repeated data.
For example, in:
$(document).ready(function() {
you could store
$(".jumbotron");$("#next");$("#result");
Then, you wouldn't have to access the DOM as much.
Also, here:
allQuestions[currentquestion].choices[i] + '</label></div><br/>';
Why not use that choices variable that you spent so much time creating?
Please show your ID - er, class, I mean
Check here:
...'" id="option' + i + '">...
This is not the point of IDs. IDs in HTML are meant for specific, unique, and special elements. If you have to create a bunch of elements that should all have the same ID and to circumvent it you are just sticking a number to the end of the ID, the you're doing something wrong.
Here, you should instead be using a class "options". Then, you can get all the elements with this class using
$(".options");
Then, you can use an index to target specific elements with this class.
answered Mar 14 '16 at 20:49
SirPython
11.9k32890
learnt quite some stuff today..thanks man ..I'm an absolute newbie..this was my first ever application and hell they don't teach these intricacies in Javascript books
– Rashid
Mar 15 '16 at 16:52
I'm unable to incorporate your first suggestion about object constructors, can you please explain how do I instantiate the class in thearray?
– Rashid
Mar 15 '16 at 16:55
@Rashid I've updated my post with an example. Hope it helps!
– SirPython
Mar 15 '16 at 20:27
still not there..this Is what I'm trying to do:function QuizQuestion(question, choices, correctAnswer){ this.question = question; this.choices = choices; this.correctAnswer = correctAnswer; }; var question1 = new QuizQuestion("Before Mt. Everest was discovered, which mountain was considered to be the highest mountain in the world?",["Mt. Kilimanjaro", "Kanchenjunga", "Mount Everest"],1); var allQuestions = [{ question1.question, question1.choices, question1.correctAnswer}] // I think I'm unable to add questions to the array correctly!
– Rashid
Mar 16 '16 at 6:01
@Rashid You are over-complicating it greatly. I've updated my post again.
– SirPython
Mar 16 '16 at 19:30
add a comment |
3
Object to class
Each object inside your allQuestions array follows the exact same "format":
{
question:
choices:
correctAnswer:
}
To make this simpler, we can extract a "class" from this so we can more easily store the questions. That might look like this:
function QuizQuesiton(question, choices, correctAnswer) {
this.question = question;
this.choices = choices;
this.correctAnswer = correctAnswer;
}
Now, when creating a question, we can simply instantiate this class like this:
new QuizQuestion("question", ["choices", "choices"], #);
Then, if you want to create an array of these, you can do this:
[
new QuizQuestion("question", ["choices", "choices"], #),
new QuizQuestion("question", ["choices", "choices"], #),
new QuizQuestion("question", ["choices", "choices"], #),
...
];
Simplification with variables
There are quite a few places where you could both simplify and speed up your code if you used variables to access repeated data.
For example, in:
$(document).ready(function() {
you could store
$(".jumbotron");$("#next");$("#result");
Then, you wouldn't have to access the DOM as much.
Also, here:
allQuestions[currentquestion].choices[i] + '</label></div><br/>';
Why not use that choices variable that you spent so much time creating?
Please show your ID - er, class, I mean
Check here:
...'" id="option' + i + '">...
This is not the point of IDs. IDs in HTML are meant for specific, unique, and special elements. If you have to create a bunch of elements that should all have the same ID and to circumvent it you are just sticking a number to the end of the ID, the you're doing something wrong.
Here, you should instead be using a class "options". Then, you can get all the elements with this class using
$(".options");
Then, you can use an index to target specific elements with this class.
answered Mar 14 '16 at 20:49
SirPython
11.9k32890
learnt quite some stuff today..thanks man ..I'm an absolute newbie..this was my first ever application and hell they don't teach these intricacies in Javascript books
– Rashid
Mar 15 '16 at 16:52
I'm unable to incorporate your first suggestion about object constructors, can you please explain how do I instantiate the class in thearray?
– Rashid
Mar 15 '16 at 16:55
@Rashid I've updated my post with an example. Hope it helps!
– SirPython
Mar 15 '16 at 20:27
still not there..this Is what I'm trying to do:function QuizQuestion(question, choices, correctAnswer){ this.question = question; this.choices = choices; this.correctAnswer = correctAnswer; }; var question1 = new QuizQuestion("Before Mt. Everest was discovered, which mountain was considered to be the highest mountain in the world?",["Mt. Kilimanjaro", "Kanchenjunga", "Mount Everest"],1); var allQuestions = [{ question1.question, question1.choices, question1.correctAnswer}] // I think I'm unable to add questions to the array correctly!
– Rashid
Mar 16 '16 at 6:01
@Rashid You are over-complicating it greatly. I've updated my post again.
– SirPython
Mar 16 '16 at 19:30
add a comment |
3
3
3
Object to class
Each object inside your allQuestions array follows the exact same "format":
{
question:
choices:
correctAnswer:
}
To make this simpler, we can extract a "class" from this so we can more easily store the questions. That might look like this:
function QuizQuesiton(question, choices, correctAnswer) {
this.question = question;
this.choices = choices;
this.correctAnswer = correctAnswer;
}
Now, when creating a question, we can simply instantiate this class like this:
new QuizQuestion("question", ["choices", "choices"], #);
Then, if you want to create an array of these, you can do this:
[
new QuizQuestion("question", ["choices", "choices"], #),
new QuizQuestion("question", ["choices", "choices"], #),
new QuizQuestion("question", ["choices", "choices"], #),
...
];
Simplification with variables
There are quite a few places where you could both simplify and speed up your code if you used variables to access repeated data.
For example, in:
$(document).ready(function() {
you could store
$(".jumbotron");$("#next");$("#result");
Then, you wouldn't have to access the DOM as much.
Also, here:
allQuestions[currentquestion].choices[i] + '</label></div><br/>';
Why not use that choices variable that you spent so much time creating?
Please show your ID - er, class, I mean
Check here:
...'" id="option' + i + '">...
This is not the point of IDs. IDs in HTML are meant for specific, unique, and special elements. If you have to create a bunch of elements that should all have the same ID and to circumvent it you are just sticking a number to the end of the ID, the you're doing something wrong.
Here, you should instead be using a class "options". Then, you can get all the elements with this class using
$(".options");
Then, you can use an index to target specific elements with this class.
answered Mar 14 '16 at 20:49
SirPython
11.9k32890
Object to class
Each object inside your allQuestions array follows the exact same "format":
{
question:
choices:
correctAnswer:
}
To make this simpler, we can extract a "class" from this so we can more easily store the questions. That might look like this:
function QuizQuesiton(question, choices, correctAnswer) {
this.question = question;
this.choices = choices;
this.correctAnswer = correctAnswer;
}
Now, when creating a question, we can simply instantiate this class like this:
new QuizQuestion("question", ["choices", "choices"], #);
Then, if you want to create an array of these, you can do this:
[
new QuizQuestion("question", ["choices", "choices"], #),
new QuizQuestion("question", ["choices", "choices"], #),
new QuizQuestion("question", ["choices", "choices"], #),
...
];
Simplification with variables
There are quite a few places where you could both simplify and speed up your code if you used variables to access repeated data.
For example, in:
$(document).ready(function() {
you could store
$(".jumbotron");$("#next");$("#result");
Then, you wouldn't have to access the DOM as much.
Also, here:
allQuestions[currentquestion].choices[i] + '</label></div><br/>';
Why not use that choices variable that you spent so much time creating?
Please show your ID - er, class, I mean
Check here:
...'" id="option' + i + '">...
This is not the point of IDs. IDs in HTML are meant for specific, unique, and special elements. If you have to create a bunch of elements that should all have the same ID and to circumvent it you are just sticking a number to the end of the ID, the you're doing something wrong.
Here, you should instead be using a class "options". Then, you can get all the elements with this class using
$(".options");
Then, you can use an index to target specific elements with this class.
answered Mar 14 '16 at 20:49
SirPython
11.9k32890
edited Mar 16 '16 at 19:29
answered Mar 14 '16 at 20:49
SirPython
11.9k32890
answered Mar 14 '16 at 20:49
SirPython
11.9k32890
answered Mar 14 '16 at 20:49
SirPython
11.9k32890
11.9k32890
learnt quite some stuff today..thanks man ..I'm an absolute newbie..this was my first ever application and hell they don't teach these intricacies in Javascript books
– Rashid
Mar 15 '16 at 16:52
I'm unable to incorporate your first suggestion about object constructors, can you please explain how do I instantiate the class in thearray?
– Rashid
Mar 15 '16 at 16:55
@Rashid I've updated my post with an example. Hope it helps!
– SirPython
Mar 15 '16 at 20:27
still not there..this Is what I'm trying to do:function QuizQuestion(question, choices, correctAnswer){ this.question = question; this.choices = choices; this.correctAnswer = correctAnswer; }; var question1 = new QuizQuestion("Before Mt. Everest was discovered, which mountain was considered to be the highest mountain in the world?",["Mt. Kilimanjaro", "Kanchenjunga", "Mount Everest"],1); var allQuestions = [{ question1.question, question1.choices, question1.correctAnswer}] // I think I'm unable to add questions to the array correctly!
– Rashid
Mar 16 '16 at 6:01
@Rashid You are over-complicating it greatly. I've updated my post again.
– SirPython
Mar 16 '16 at 19:30
add a comment |
learnt quite some stuff today..thanks man ..I'm an absolute newbie..this was my first ever application and hell they don't teach these intricacies in Javascript books
– Rashid
Mar 15 '16 at 16:52
I'm unable to incorporate your first suggestion about object constructors, can you please explain how do I instantiate the class in thearray?
– Rashid
Mar 15 '16 at 16:55
@Rashid I've updated my post with an example. Hope it helps!
– SirPython
Mar 15 '16 at 20:27
still not there..this Is what I'm trying to do:function QuizQuestion(question, choices, correctAnswer){ this.question = question; this.choices = choices; this.correctAnswer = correctAnswer; }; var question1 = new QuizQuestion("Before Mt. Everest was discovered, which mountain was considered to be the highest mountain in the world?",["Mt. Kilimanjaro", "Kanchenjunga", "Mount Everest"],1); var allQuestions = [{ question1.question, question1.choices, question1.correctAnswer}] // I think I'm unable to add questions to the array correctly!
– Rashid
Mar 16 '16 at 6:01
@Rashid You are over-complicating it greatly. I've updated my post again.
– SirPython
Mar 16 '16 at 19:30
learnt quite some stuff today..thanks man ..I'm an absolute newbie..this was my first ever application and hell they don't teach these intricacies in Javascript books
– Rashid
Mar 15 '16 at 16:52
learnt quite some stuff today..thanks man ..I'm an absolute newbie..this was my first ever application and hell they don't teach these intricacies in Javascript books
– Rashid
Mar 15 '16 at 16:52
I'm unable to incorporate your first suggestion about object constructors, can you please explain how do I instantiate the class in the
array?– Rashid
Mar 15 '16 at 16:55
I'm unable to incorporate your first suggestion about object constructors, can you please explain how do I instantiate the class in the
array?– Rashid
Mar 15 '16 at 16:55
@Rashid I've updated my post with an example. Hope it helps!
– SirPython
Mar 15 '16 at 20:27
@Rashid I've updated my post with an example. Hope it helps!
– SirPython
Mar 15 '16 at 20:27
still not there..this Is what I'm trying to do:
function QuizQuestion(question, choices, correctAnswer){ this.question = question; this.choices = choices; this.correctAnswer = correctAnswer; }; var question1 = new QuizQuestion("Before Mt. Everest was discovered, which mountain was considered to be the highest mountain in the world?",["Mt. Kilimanjaro", "Kanchenjunga", "Mount Everest"],1); var allQuestions = [{ question1.question, question1.choices, question1.correctAnswer}] // I think I'm unable to add questions to the array correctly!– Rashid
Mar 16 '16 at 6:01
still not there..this Is what I'm trying to do:
function QuizQuestion(question, choices, correctAnswer){ this.question = question; this.choices = choices; this.correctAnswer = correctAnswer; }; var question1 = new QuizQuestion("Before Mt. Everest was discovered, which mountain was considered to be the highest mountain in the world?",["Mt. Kilimanjaro", "Kanchenjunga", "Mount Everest"],1); var allQuestions = [{ question1.question, question1.choices, question1.correctAnswer}] // I think I'm unable to add questions to the array correctly!– Rashid
Mar 16 '16 at 6:01
@Rashid You are over-complicating it greatly. I've updated my post again.
– SirPython
Mar 16 '16 at 19:30
@Rashid You are over-complicating it greatly. I've updated my post again.
– SirPython
Mar 16 '16 at 19:30
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Code Review Stack Exchange!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
Use MathJax to format equations. MathJax reference.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fcodereview.stackexchange.com%2fquestions%2f122837%2fsimple-javascript-quiz-application-with-radio-buttons%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Add code using {} in editor in question itself.
– Navoneel
Mar 14 '16 at 17:29
@AlienHerbNite didn't know that..still a beginner both at programming as well as at stackoverflow.
– Rashid
Mar 14 '16 at 17:46
@tunaki thanks for editing the question!
– Rashid
Mar 14 '16 at 17:47
@Rashid No worries! As long as your code is always embedded directly into your question it's fine. Welcome to Code Review! :)
– Ethan Bierlein
Mar 14 '16 at 17:47