I've been tackling a challenge while developing a quiz application. My aim is to display a button upon clicking the check button, but for some reason, it's not functioning as expected.
var pos = 0,
test, test_status, question, choice, choices, chA, chB, chC, correct = 0;
var questions = [
["What is the value of num?", "6", "5", "Potato", "A", "A Variable is something that can store data, like a number or a String (Some text). They can be written as an int or as a string. EXAMPLE: ", "https://s1.postimg.org/nqvwnr0un/Untitled.png"],
["What is 7 x 3?", "21", "24", "25", "A"],
["What is 8 / 2?", "10", "2", "4", "C"]
];
function _(x) {
return document.getElementById(x);
}
function renderQuestion() {
test = _("test_q");
text = _("test_t");
if (pos >= questions.length) {
test.innerHTML = "<h2>You got " + correct + " of " + questions.length + " questions correct</h2>";
_("test_status").innerHTML = "Test Completed";
pos = 0;
correct = 0;
return false;
}
var BarPercent = (100 / questions.length) * (pos + 1);
var pb = document.getElementById("pb");
pb.style.width = BarPercent + "%";
var qresult = false;
function showResult(correct) {
if (correct === true) {
document.getElementById("Result").style.visibility = "visible";
}
}
question = questions[pos][0];
chA = questions[pos][1];
chB = questions[pos][2];
chC = questions[pos][3];
info = questions[pos][5];
if (questions[pos][6] !== undefined) {
img = questions[pos][6];
} else {
img = ""
}
test.innerHTML = "<h4 style='color: #DDD;'>" + info + "</h3><br><img src='" + img + "' style='align: center; width: 50%;'>";
test.innerHTML += "<h3>" + question + "</h3>";
test.innerHTML += "<input type='radio' name='choices' value='A'> " + chA + "<br>";
test.innerHTML += "<input type='radio' name='choices' value='B'> " + chB + "<br>";
test.innerHTML += "<input type='radio' name='choices' value='C'> " + chC + "<br><br>";
test.innerHTML += "<button id='sub_button'style='color: green; background-color: #CCC; border: 0px; width: 100%; text-align: left; font-weight: 100px; font-size: 70px; border-radius: 20px;' onclick='checkAnswer()'>Check</button>";
}
function checkAnswer() {
choices = document.getElementsByName("choices");
for (var i = 0; i < choices.length; i++) {
if (choices[i].checked) {
choice = choices[i].value;
}
}
if (choice == questions[pos][4]) {
correct++;
qresult = true;
showResult(qresult);
}
pos++;
renderQuestion();
}
window.addEventListener("load", renderQuestion, false);div {
border-radius: 20px;
}
#test_q {
background-color: #AAA;
padding: 10px 40px 40px 40px;
}
body {
font-family: sans-serif;
background-color: AAA;
color: #EEE;
}
#pbc {
width: 100%;
height: 16px;
background: #444;
border-radius: 10px;
margin-bottom: 20px;
}
#pbc>#pb {
position: relative;
top: 0px;
background: #1D4;
width: 0%;
height: 16px;
color: #0FF;
text-align: center;
border-radius: 10px;
}
#Result {
margin-top: 150px;
width: 100%;
height: 100px;
max-height: 100px;
background-color: lightgreen;
position: absolute;
margin-bottom: 25px;
border-radius: 20px;
border: 0px;
visibility: hidden;
}
#result {
color: green;
text-align: left;
margin-left: 20px;
}<div id="pbc">
<div id="pb"></div>
</div>
<div id="test_q"></div>
<button id="Result" onclick="renderQuestion()">
<h1 id="result"></h1>
</button>