This quiz works on the computer, but when I try to use it on a Mobile phone the text is larger and condensed so the button stops working. I tried to change the .slide to relative and the .button top-margin to 30px, but the button stops working if the .slide is relative. So because that wasn't working I was trying to basically set the margin-top on the button large enough so it would always work.
Ideally the button is relative to the current question and appears about 30px below the answers. What am I doing wrong here? (Pertaining to the css, I know now my math was done very inefficiently.)
<style type="text/css">
body {
font-size: 20px;
font-family: 'Work Sans', sans-serif;
color: #333;
font-weight: 300;
text-align: center;
background-color: #f8f6f0;
}
h1 {
font-weight: 300;
margin: 0px;
padding: 10px;
font-size: 20px;
background-color: #444;
color: #fff;
}
.section-description {
margin-bottom: 20px;
}
.question {
position: relative;
font-size: 30px;
margin-bottom: 10px;
}
.answers {
position: relative;
margin-bottom: 20px;
text-align: left;
display: inline-block;
}
.answers label {
display: block;
margin-bottom: 10px;
}
button {
position: relative;
font-family: 'Work Sans', sans-serif;
font-size: 22px;
background-color: #279;
color: #fff;
border: 0px;
border-radius: 3px;
padding: 20px;
cursor: pointer;
margin-top: 350px;
margin-bottom: 0px;
}
button:hover {
background-color: #38a;
}
.slide {
position: absolute;
left: 0px;
top: 0px;
width: 100%;
z-index: 1;
opacity: 0;
transition: opacity 0.5s;
}
.active-slide {
opacity: 1;
z-index: 2;
}
.quiz-container {
position: relative;
height: 200px;
margin-top: 60px;
}
</style>
<h1>ASVAB PRETEST</h1>
<meta name="viewport" content="width=device-width, initial-scale=1">
<div >
<div id="quiz"> </div>
</div>
<p><button id="previous" type="button">Previous Question</button><button id="next" type="button">Next Question</button><button id="submit" type="button">Submit Quiz</button></p>
<div id="results"> </div>
<div id="results"> </div>
<div id="category-scores"> </div>
<div id="raw-scores"> </div>
<script>
// variable for categories
const resultsContainer = document.getElementById('results');
const categoryScoresContainer = document.getElementById('category-scores');
const rawScoresContainer = document.getElementById('raw-scores');
const quizContainer = document.getElementById("quiz");
const submitButton = document.getElementById("submit");
(function() {
// Functions
function buildQuiz() {
// variable to store the HTML output
const output = [];
// for each question...
myQuestions.forEach((currentQuestion, questionNumber) => {
// variable to store the list of possible answers
const answers = [];
// and for each available answer...
for (letter in currentQuestion.answers) {
// ...add an HTML radio button
answers.push(
`<label>
<input type="radio" name="question${questionNumber}" value="${letter}">
${letter} :
${currentQuestion.answers[letter]}
</label>`
);
}
// add this question and its answers to the output
output.push(
`<div >
${currentQuestion.description ? `<div >${currentQuestion.description}</div>` : ''}
<div > ${currentQuestion.question} </div>
<div > ${answers.join("")} </div>
</div>`
);
});
// combine output list into one string of HTML and put it on the page
quizContainer.innerHTML = output.join("");
const nextButton = document.getElementById("next");
nextButton.addEventListener("click", function() {
const description = document.getElementById("description");
if (description) quizContainer.removeChild(description);
});
}
function showResults() {
// gather answer containers from our quiz
const answerContainers = quizContainer.querySelectorAll('.answers');
// keep track of user's answers
let numCorrect = 0;
// for each question...
myQuestions.forEach((currentQuestion, questionNumber) => {
// find selected answer
const answerContainer = answerContainers[questionNumber];
const selector = `input[name=question${questionNumber}]:checked`;
const userAnswer = (answerContainer.querySelector(selector) || {}).value;
// if answer is correct
if (userAnswer === currentQuestion.correctAnswer) {
// add to the number of correct answers
numCorrect ;
scores[currentQuestion.category] ;
//multiplies by 2 for final result
scores[currentQuestion.category] ;
}
});
//hide myQuestions
quizContainer.innerHTML = "";
//calculate VE
let ve = scores.wk scores.pc;
let finalve;
if (ve === 0) {
finalve = 20;
} else if (ve === 2) {
finalve = 40;
} else if (ve === 4) {
finalve = 42;
} else if (ve === 6) {
finalve = 46;
} else if (ve === 8) {
finalve = 50;
} else if (ve === 10) {
finalve = 54;
} else if (ve === 12) {
finalve = 56;
} else if (ve === 14) {
finalve = 60;
} else if (ve === 16) {
finalve = 64;
} else if (ve === 18) {
finalve = 66;
} else if (ve === 20) {
finalve = 70;
} else if (ve === 22) {
finalve = 74;
} else if (ve === 24) {
finalve = 78;
} else if (ve === 26) {
finalve = 80;
} else if (ve === 28) {
finalve = 84;
} else if (ve === 30) {
finalve = 88;
} else if (ve === 32) {
finalve = 90;
} else if (ve === 34) {
finalve = 94;
} else if (ve === 36) {
finalve = 98;
} else if (ve === 38) {
finalve = 100;
} else if (ve === 40) {
finalve = 104;
} else if (ve === 42) {
finalve = 108;
} else if (ve === 44) {
finalve = 112;
} else if (ve === 46) {
finalve = 114;
} else if (ve === 48) {
finalve = 118;
} else if (ve === 50) {
finalve = 122;
} else if (ve === 52) {
finalve = 122;
} else {
// Handle any other cases
}
//calculate ar
let ar = scores.ar;
let finalar;
if (ar === 0) {
finalar = 26;
} else if (ar === 2) {
finalar = 27;
} else if (ar === 4) {
finalar = 30;
} else if (ar === 6) {
finalar = 32;
} else if (ar === 8) {
finalar = 35;
} else if (ar === 10) {
finalar = 38;
} else if (ar === 12) {
finalar = 41;
} else if (ar === 14) {
finalar = 44;
} else if (ar === 16) {
finalar = 47;
} else if (ar === 18) {
finalar = 49;
} else if (ar === 20) {
finalar = 52;
} else if (ar === 22) {
finalar = 55;
} else if (ar === 24) {
finalar = 58;
} else if (ar === 26) {
finalar = 61;
} else if (ar === 28) {
finalar = 63;
} else if (ar === 30) {
finalar = 66;
} else {
// Handle any other cases
}
let mk = scores.mk;
let finalmk;
if (mk === 0) {
finalmk = 29;
} else if (mk === 2) {
finalmk = 31;
} else if (mk === 4) {
finalmk = 34;
} else if (mk === 6) {
finalmk = 37;
} else if (mk === 8) {
finalmk = 41;
} else if (mk === 10) {
finalmk = 44;
} else if (mk === 12) {
finalmk = 47;
} else if (mk === 14) {
finalmk = 50;
} else if (mk === 16) {
finalmk = 53;
} else if (mk === 18) {
finalmk = 57;
} else if (mk === 20) {
finalmk = 60;
} else if (mk === 22) {
finalmk = 63;
} else if (mk === 24) {
finalmk = 66;
} else if (mk === 26) {
finalmk = 88;
} else {
// Handle any other cases
}
//calculates std
let std = finalve finalar finalmk;
//converts std to pct
let pct;
if (std >= 80 && std <= 120) {
pct = 1;
} else if (std >= 121 && std <= 124) {
pct = 2;
} else if (std >= 125 && std <= 127) {
pct = 3;
} else if (std >= 128 && std <= 131) {
pct = 4;
} else if (std >= 132 && std <= 134) {
pct = 5;
} else if (std >= 135 && std <= 137) {
pct = 6;
} else if (std >= 138 && std <= 139) {
pct = 7;
} else if (std >= 140 && std <= 142) {
pct = 8;
} else if (std >= 143 && std <= 144) {
pct = 9;
} else if (std >= 145 && std <= 146) {
pct = 10;
} else if (std >= 147 && std <= 148) {
pct = 11;
} else if (std >= 149 && std <= 150) {
pct = 12;
} else if (std >= 151 && std <= 153) {
pct = 13;
} else if (std === 154) {
pct = 14;
} else if (std >= 155 && std <= 156) {
pct = 15;
} else if (std >= 157 && std <= 158) {
pct = 16;
} else if (std >= 159 && std <= 160) {
pct = 17;
} else if (std >= 161 && std <= 162) {
pct = 18;
} else if (std >= 163 && std <= 164) {
pct = 19;
} else if (std === 165) {
pct = 20;
} else if (std >= 166 && std <= 167) {
pct = 21;
} else if (std >= 168 && std <= 169) {
pct = 22;
} else if (std >= 170 && std <= 171) {
pct = 23;
} else if (std === 172) {
pct = 24;
} else if (std === 173) {
pct = 25;
} else if (std >= 174 && std <= 175) {
pct = 26;
} else if (std >= 176 && std <= 177) {
pct = 27;
} else if (std === 178) {
pct = 28;
} else if (std === 179) {
pct = 29;
} else if (std === 181) {
pct = 30;
} else if (std === 182) {
pct = 31;
} else if (std >= 183 && std <= 184) {
pct = 32;
} else if (std === 185) {
pct = 33;
} else if (std === 186) {
pct = 34;
} else if (std >= 187 && std <= 188) {
pct = 35;
} else if (std === 189) {
pct = 36;
} else if (std === 190) {
pct = 37;
} else if (std === 191) {
pct = 38;
} else if (std === 192) {
pct = 39;
} else if (std === 193) {
pct = 40;
} else if (std === 194) {
pct = 41;
} else if (std >= 195 && std <= 196) {
pct = 42;
} else if (std === 197) {
pct = 43;
} else if (std === 198) {
pct = 44;
} else if (std === 199) {
pct = 45;
} else if (std === 200) {
pct = 46;
} else if (std === 201) {
pct = 47;
} else if (std === 202) {
pct = 48;
} else if (std === 203) {
pct = 49;
} else if (std === 204) {
pct = 50;
} else if (std === 205) {
pct = 51;
} else if (std === 206) {
pct = 52;
} else if (std >= 207 && std <= 208) {
pct = 53;
} else if (std === 209) {
pct = 54;
} else if (std === 210) {
pct = 55;
} else if (std === 211) {
pct = 56;
} else if (std === 212) {
pct = 57;
} else if (std === 213) {
pct = 58;
} else if (std === 214) {
pct = 60;
} else if (std === 215) {
pct = 61;
} else if (std === 216) {
pct = 62;
} else if (std === 217) {
pct = 63;
} else if (std === 218) {
pct = 64;
} else if (std === 219) {
pct = 65;
} else if (std === 220) {
pct = 66;
} else if (std === 221) {
pct = 67;
} else if (std === 222) {
pct = 68;
} else if (std === 223) {
pct = 69;
} else if (std === 224) {
pct = 70;
} else if (std === 225) {
pct = 71;
} else if (std === 226) {
pct = 72;
} else if (std === 227) {
pct = 73;
} else if (std === 228) {
pct = 74;
} else if (std === 229) {
pct = 75;
} else if (std === 230) {
pct = 76;
} else if (std === 231) {
pct = 77;
} else if (std === 232) {
pct = 78;
} else if (std === 233) {
pct = 79;
} else if (std >= 234 && std <= 235) {
pct = 80;
} else if (std === 236) {
pct = 81;
} else if (std === 237) {
pct = 82;
} else if (std === 238) {
pct = 83;
} else if (std === 239) {
pct = 84;
} else if (std === 240) {
pct = 85;
} else if (std === 241) {
pct = 86;
} else if (std === 242) {
pct = 87;
} else if (std === 243) {
pct = 88;
} else if (std === 244) {
pct = 89;
} else if (std === 245) {
pct = 90;
} else if (std === 246) {
pct = 91;
} else if (std === 247) {
pct = 92;
} else if (std === 248) {
pct = 93;
} else if (std === 249) {
pct = 94;
} else if (std === 250) {
pct = 95;
} else if (std === 251) {
pct = 96;
} else if (std === 252) {
pct = 97;
} else if (std === 253) {
pct = 98;
} else if (std >= 254 && std <= 320) {
pct = 99;
} else {
// Handle any other cases
}
// show number of correct answers out of total
resultsContainer.innerHTML = `${numCorrect} out of ${myQuestions.length}`;
categoryScoresContainer.innerHTML = `
<p>
<b>Screenshot this page and send it to your recruiter.</b>
</p>
<p>Your estimated AFQT score is ${pct}</p><br /><br />
<p>Word Knowledge = ${scores.wk/2} out of 18</p>
<p>Arithmetic Reasoning = ${scores.ar/2} out of 15</p>
<p>Paragraph Comprehension = ${scores.pc/2} out of 8</p>
<p>Mathmematics Knowledge = ${scores.mk/2} out of 13</p>`;
// hide previous, next and submit button, and make quiz read-only
const previousButton = document.getElementById("previous");
const nextButton = document.getElementById("next");
const submitButton = document.getElementById("submit");
previousButton.style.display = "none";
nextButton.style.display = "none";
submitButton.style.display = "none";
const inputElements = quizContainer.querySelectorAll("input");
inputElements.forEach(input => {
input.setAttribute("disabled", true);
});
//add restart button
const restartButton = document.getElementById("restart");
restartButton.style.display = "block";
restartButton.addEventListener("click", function() {
location.reload();
});
}
function showSlide(n) {
slides[currentSlide].classList.remove('active-slide');
slides[n].classList.add('active-slide');
currentSlide = n;
if (currentSlide === 0) {
previousButton.style.display = 'none';
} else {
previousButton.style.display = 'inline-block';
}
if (currentSlide === slides.length - 1) {
nextButton.style.display = 'none';
submitButton.style.display = 'inline-block';
} else {
nextButton.style.display = 'inline-block';
submitButton.style.display = 'none';
}
}
function showNextSlide() {
showSlide(currentSlide 1);
}
function showPreviousSlide() {
showSlide(currentSlide - 1);
}
// Variables
const quizContainer = document.getElementById('quiz');
const resultsContainer = document.getElementById('results');
const submitButton = document.getElementById('submit');
const myQuestions = [{
category: "wk",
description: "<h2>PART I - WORD KNOWLEDGE. YOU WILL HAVE 7 MINUTES TO COMPLETE.</h2>",
question: "1. <b><u>SMALL</u></b> MOST NEARLY MEANS?",
answers: {
a: "STURDY",
b: "ROUND",
c: "CHEAP",
d: "LITTLE"
},
correctAnswer: "d"
},
{
category: "ar",
description: "<h2>PART II - ARITHMETIC REASONING - YOU WILL HAVE FOURTEEN (14) MINUTES:</h2>",
question: "1. TWO AUTOMOBILES START TOGETHER FROM THE SAME PLACE AND TRAVEL ALONG THE SAME ROUTE. THE FIRST AVERAGES 40 MPH. THE SECOND 55 MPH. HOW MANY MILES FURTHER ALONG THE ROUTE IS THE SECOND AUTO AT THE END OF THE 5TH HOUR?",
answers: {
a: "55 x 5",
b: "55 - 40",
c: "(55x5) - (40x5)",
d: "55/5 - 40/5"
},
correctAnswer: "c"
},
{
category: "pc",
description: "<h2>PART III - PARAGRAPH COMPREHENSION - YOU WILL HAVE SEVEN (7) MINUTES:</h2>",
question: "1. THE DUTY OF THE LIGHTHOUSE KEEPER IS TO KEEP THE LIGHT BURNING NO MATTER WHAT HAPPENS, SO THAT SHIPS WILL BE WARNED OF THE PRESENCE OF DANGEROUS ROCKS. IF A SHIPWRECK SHOULD OCCUR NEAR THE LIGHTHOUSE, EVEN THOUGH HE WOULD LIKE TO AID IN THE RESCUE OF IT'S CREW AND PASSENGERS, THE LIGHTHOUSE KEEPER MUST......",
answers: {
a: "STAY AT HIS LIGHT",
b: "RUSH TO THEIR AID",
c: "TURN OUT THE LIGHT",
d: "QUICKLY SOUND THE SIREN"
},
correctAnswer: "a"
},
{
category: "mk",
description: "<h2>PART IV - MATHEMATICS KNOWLEDGE - YOU WILL HAVE TWELVE (12) MINUTES:</h2>",
question: "1. WHICH OF THE FOLLOWING IS THE SMALLEST PRIME NUMBER GREATER THAN 200?",
answers: {
a: "201",
b: "205",
c: "211",
d: "214"
},
correctAnswer: "c"
},
];
// Kick things off
buildQuiz();
// Pagination
const previousButton = document.getElementById("previous");
const nextButton = document.getElementById("next");
const slides = document.querySelectorAll(".slide");
let currentSlide = 0;
let scores = {
wk: 0,
ar: 0,
pc: 0,
mk: 0,
};
// Show the first slide
showSlide(currentSlide);
// Event listeners
submitButton.addEventListener('click', showResults);
previousButton.addEventListener("click", showPreviousSlide);
nextButton.addEventListener("click", showNextSlide);
})();
</script>CodePudding user response：
I changed three things about your code:
The first thing is I enabled the button to click, the solution is to add z-index into the CSS. Please notice that do not set the value as 99999 because it will be hard for you to maintain the website. For example, if you want to add something else that is above the button(such as login to take next question or something like that), you have to set new elements' z-index as 99999999
The second thing I changed is changing p into div because you use buttons in p and that will not work in some cases.
The last thing is to let the ButtonDIV at the bottom by using top:calc(100vh - 10px); (Your requirement), and now it is at the bottom.
Here is the code:
<style type="text/css">
body {
font-size: 20px;
font-family: 'Work Sans', sans-serif;
color: #333;
font-weight: 300;
text-align: center;
background-color: #f8f6f0;
}
h1 {
font-weight: 300;
margin: 0px;
padding: 10px;
font-size: 20px;
background-color: #444;
color: #fff;
}
.section-description {
margin-bottom: 20px;
}
.question {
position: relative;
font-size: 30px;
margin-bottom: 10px;
}
.answers {
position: relative;
margin-bottom: 20px;
text-align: left;
display: inline-block;
}
.answers label {
display: block;
margin-bottom: 10px;
}
button {
position: relative;
font-family: 'Work Sans', sans-serif;
font-size: 22px;
background-color: #279;
color: #fff;
border: 0px;
border-radius: 3px;
padding: 20px;
cursor: pointer;
margin-top: 350px;
margin-bottom: 0px;
z-index:100;
}
button:hover {
background-color: #38a;
}
.slide {
position: absolute;
left: 0px;
top: 0px;
width: 100%;
z-index: 1;
opacity: 0;
transition: opacity 0.5s;
}
.active-slide {
opacity: 1;
z-index: 2;
}
.quiz-container {
position: relative;
height: 200px;
margin-top: 60px;
}
#BUTTONDIV{
margin-bottom: 0;
top:calc(100vh - 10px);
height:300px;
position:relative;
}
</style>
<h1>ASVAB PRETEST</h1>
<meta name="viewport" content="width=device-width, initial-scale=1">
<div >
<div id="quiz"> </div>
</div>
<div id="BUTTONDIV"><button id="previous" type="button">Previous Question</button><button id="next" type="button">Next Question</button><button id="submit" type="button">Submit Quiz</button></div>
<!--Do not use p here, instead, you are suppoesed to use div-->
<div id="results"> </div>
<div id="results"> </div>
<div id="category-scores"> </div>
<div id="raw-scores"> </div>
<script>
// variable for categories
const resultsContainer = document.getElementById('results');
const categoryScoresContainer = document.getElementById('category-scores');
const rawScoresContainer = document.getElementById('raw-scores');
const quizContainer = document.getElementById("quiz");
const submitButton = document.getElementById("submit");
(function() {
// Functions
function buildQuiz() {
// variable to store the HTML output
const output = [];
// for each question...
myQuestions.forEach((currentQuestion, questionNumber) => {
// variable to store the list of possible answers
const answers = [];
// and for each available answer...
for (letter in currentQuestion.answers) {
// ...add an HTML radio button
answers.push(
`<label>
<input type="radio" name="question${questionNumber}" value="${letter}">
${letter} :
${currentQuestion.answers[letter]}
</label>`
);
}
// add this question and its answers to the output
output.push(
`<div >
${currentQuestion.description ? `<div >${currentQuestion.description}</div>` : ''}
<div > ${currentQuestion.question} </div>
<div > ${answers.join("")} </div>
</div>`
);
});
// combine output list into one string of HTML and put it on the page
quizContainer.innerHTML = output.join("");
const nextButton = document.getElementById("next");
nextButton.addEventListener("click", function() {
const description = document.getElementById("description");
if (description) quizContainer.removeChild(description);
});
}
function showResults() {
// gather answer containers from our quiz
const answerContainers = quizContainer.querySelectorAll('.answers');
// keep track of user's answers
let numCorrect = 0;
// for each question...
myQuestions.forEach((currentQuestion, questionNumber) => {
// find selected answer
const answerContainer = answerContainers[questionNumber];
const selector = `input[name=question${questionNumber}]:checked`;
const userAnswer = (answerContainer.querySelector(selector) || {}).value;
// if answer is correct
if (userAnswer === currentQuestion.correctAnswer) {
// add to the number of correct answers
numCorrect ;
scores[currentQuestion.category] ;
//multiplies by 2 for final result
scores[currentQuestion.category] ;
}
});
//hide myQuestions
quizContainer.innerHTML = "";
//calculate VE
let ve = scores.wk scores.pc;
let finalve;
if (ve === 0) {
finalve = 20;
} else if (ve === 2) {
finalve = 40;
} else if (ve === 4) {
finalve = 42;
} else if (ve === 6) {
finalve = 46;
} else if (ve === 8) {
finalve = 50;
} else if (ve === 10) {
finalve = 54;
} else if (ve === 12) {
finalve = 56;
} else if (ve === 14) {
finalve = 60;
} else if (ve === 16) {
finalve = 64;
} else if (ve === 18) {
finalve = 66;
} else if (ve === 20) {
finalve = 70;
} else if (ve === 22) {
finalve = 74;
} else if (ve === 24) {
finalve = 78;
} else if (ve === 26) {
finalve = 80;
} else if (ve === 28) {
finalve = 84;
} else if (ve === 30) {
finalve = 88;
} else if (ve === 32) {
finalve = 90;
} else if (ve === 34) {
finalve = 94;
} else if (ve === 36) {
finalve = 98;
} else if (ve === 38) {
finalve = 100;
} else if (ve === 40) {
finalve = 104;
} else if (ve === 42) {
finalve = 108;
} else if (ve === 44) {
finalve = 112;
} else if (ve === 46) {
finalve = 114;
} else if (ve === 48) {
finalve = 118;
} else if (ve === 50) {
finalve = 122;
} else if (ve === 52) {
finalve = 122;
} else {
// Handle any other cases
}
//calculate ar
let ar = scores.ar;
let finalar;
if (ar === 0) {
finalar = 26;
} else if (ar === 2) {
finalar = 27;
} else if (ar === 4) {
finalar = 30;
} else if (ar === 6) {
finalar = 32;
} else if (ar === 8) {
finalar = 35;
} else if (ar === 10) {
finalar = 38;
} else if (ar === 12) {
finalar = 41;
} else if (ar === 14) {
finalar = 44;
} else if (ar === 16) {
finalar = 47;
} else if (ar === 18) {
finalar = 49;
} else if (ar === 20) {
finalar = 52;
} else if (ar === 22) {
finalar = 55;
} else if (ar === 24) {
finalar = 58;
} else if (ar === 26) {
finalar = 61;
} else if (ar === 28) {
finalar = 63;
} else if (ar === 30) {
finalar = 66;
} else {
// Handle any other cases
}
let mk = scores.mk;
let finalmk;
if (mk === 0) {
finalmk = 29;
} else if (mk === 2) {
finalmk = 31;
} else if (mk === 4) {
finalmk = 34;
} else if (mk === 6) {
finalmk = 37;
} else if (mk === 8) {
finalmk = 41;
} else if (mk === 10) {
finalmk = 44;
} else if (mk === 12) {
finalmk = 47;
} else if (mk === 14) {
finalmk = 50;
} else if (mk === 16) {
finalmk = 53;
} else if (mk === 18) {
finalmk = 57;
} else if (mk === 20) {
finalmk = 60;
} else if (mk === 22) {
finalmk = 63;
} else if (mk === 24) {
finalmk = 66;
} else if (mk === 26) {
finalmk = 88;
} else {
// Handle any other cases
}
//calculates std
let std = finalve finalar finalmk;
//converts std to pct
let pct;
if (std >= 80 && std <= 120) {
pct = 1;
} else if (std >= 121 && std <= 124) {
pct = 2;
} else if (std >= 125 && std <= 127) {
pct = 3;
} else if (std >= 128 && std <= 131) {
pct = 4;
} else if (std >= 132 && std <= 134) {
pct = 5;
} else if (std >= 135 && std <= 137) {
pct = 6;
} else if (std >= 138 && std <= 139) {
pct = 7;
} else if (std >= 140 && std <= 142) {
pct = 8;
} else if (std >= 143 && std <= 144) {
pct = 9;
} else if (std >= 145 && std <= 146) {
pct = 10;
} else if (std >= 147 && std <= 148) {
pct = 11;
} else if (std >= 149 && std <= 150) {
pct = 12;
} else if (std >= 151 && std <= 153) {
pct = 13;
} else if (std === 154) {
pct = 14;
} else if (std >= 155 && std <= 156) {
pct = 15;
} else if (std >= 157 && std <= 158) {
pct = 16;
} else if (std >= 159 && std <= 160) {
pct = 17;
} else if (std >= 161 && std <= 162) {
pct = 18;
} else if (std >= 163 && std <= 164) {
pct = 19;
} else if (std === 165) {
pct = 20;
} else if (std >= 166 && std <= 167) {
pct = 21;
} else if (std >= 168 && std <= 169) {
pct = 22;
} else if (std >= 170 && std <= 171) {
pct = 23;
} else if (std === 172) {
pct = 24;
} else if (std === 173) {
pct = 25;
} else if (std >= 174 && std <= 175) {
pct = 26;
} else if (std >= 176 && std <= 177) {
pct = 27;
} else if (std === 178) {
pct = 28;
} else if (std === 179) {
pct = 29;
} else if (std === 181) {
pct = 30;
} else if (std === 182) {
pct = 31;
} else if (std >= 183 && std <= 184) {
pct = 32;
} else if (std === 185) {
pct = 33;
} else if (std === 186) {
pct = 34;
} else if (std >= 187 && std <= 188) {
pct = 35;
} else if (std === 189) {
pct = 36;
} else if (std === 190) {
pct = 37;
} else if (std === 191) {
pct = 38;
} else if (std === 192) {
pct = 39;
} else if (std === 193) {
pct = 40;
} else if (std === 194) {
pct = 41;
} else if (std >= 195 && std <= 196) {
pct = 42;
} else if (std === 197) {
pct = 43;
} else if (std === 198) {
pct = 44;
} else if (std === 199) {
pct = 45;
} else if (std === 200) {
pct = 46;
} else if (std === 201) {
pct = 47;
} else if (std === 202) {
pct = 48;
} else if (std === 203) {
pct = 49;
} else if (std === 204) {
pct = 50;
} else if (std === 205) {
pct = 51;
} else if (std === 206) {
pct = 52;
} else if (std >= 207 && std <= 208) {
pct = 53;
} else if (std === 209) {
pct = 54;
} else if (std === 210) {
pct = 55;
} else if (std === 211) {
pct = 56;
} else if (std === 212) {
pct = 57;
} else if (std === 213) {
pct = 58;
} else if (std === 214) {
pct = 60;
} else if (std === 215) {
pct = 61;
} else if (std === 216) {
pct = 62;
} else if (std === 217) {
pct = 63;
} else if (std === 218) {
pct = 64;
} else if (std === 219) {
pct = 65;
} else if (std === 220) {
pct = 66;
} else if (std === 221) {
pct = 67;
} else if (std === 222) {
pct = 68;
} else if (std === 223) {
pct = 69;
} else if (std === 224) {
pct = 70;
} else if (std === 225) {
pct = 71;
} else if (std === 226) {
pct = 72;
} else if (std === 227) {
pct = 73;
} else if (std === 228) {
pct = 74;
} else if (std === 229) {
pct = 75;
} else if (std === 230) {
pct = 76;
} else if (std === 231) {
pct = 77;
} else if (std === 232) {
pct = 78;
} else if (std === 233) {
pct = 79;
} else if (std >= 234 && std <= 235) {
pct = 80;
} else if (std === 236) {
pct = 81;
} else if (std === 237) {
pct = 82;
} else if (std === 238) {
pct = 83;
} else if (std === 239) {
pct = 84;
} else if (std === 240) {
pct = 85;
} else if (std === 241) {
pct = 86;
} else if (std === 242) {
pct = 87;
} else if (std === 243) {
pct = 88;
} else if (std === 244) {
pct = 89;
} else if (std === 245) {
pct = 90;
} else if (std === 246) {
pct = 91;
} else if (std === 247) {
pct = 92;
} else if (std === 248) {
pct = 93;
} else if (std === 249) {
pct = 94;
} else if (std === 250) {
pct = 95;
} else if (std === 251) {
pct = 96;
} else if (std === 252) {
pct = 97;
} else if (std === 253) {
pct = 98;
} else if (std >= 254 && std <= 320) {
pct = 99;
} else {
// Handle any other cases
}
// show number of correct answers out of total
resultsContainer.innerHTML = `${numCorrect} out of ${myQuestions.length}`;
categoryScoresContainer.innerHTML = `
<p>
<b>Screenshot this page and send it to your recruiter.</b>
</p>
<p>Your estimated AFQT score is ${pct}</p><br /><br />
<p>Word Knowledge = ${scores.wk/2} out of 18</p>
<p>Arithmetic Reasoning = ${scores.ar/2} out of 15</p>
<p>Paragraph Comprehension = ${scores.pc/2} out of 8</p>
<p>Mathmematics Knowledge = ${scores.mk/2} out of 13</p>`;
// hide previous, next and submit button, and make quiz read-only
const previousButton = document.getElementById("previous");
const nextButton = document.getElementById("next");
const submitButton = document.getElementById("submit");
previousButton.style.display = "none";
nextButton.style.display = "none";
submitButton.style.display = "none";
const inputElements = quizContainer.querySelectorAll("input");
inputElements.forEach(input => {
input.setAttribute("disabled", true);
});
//add restart button
const restartButton = document.getElementById("restart");
restartButton.style.display = "block";
restartButton.addEventListener("click", function() {
location.reload();
});
}
function showSlide(n) {
slides[currentSlide].classList.remove('active-slide');
slides[n].classList.add('active-slide');
currentSlide = n;
if (currentSlide === 0) {
previousButton.style.display = 'none';
} else {
previousButton.style.display = 'inline-block';
}
if (currentSlide === slides.length - 1) {
nextButton.style.display = 'none';
submitButton.style.display = 'inline-block';
} else {
nextButton.style.display = 'inline-block';
submitButton.style.display = 'none';
}
}
function showNextSlide() {
showSlide(currentSlide 1);
}
function showPreviousSlide() {
showSlide(currentSlide - 1);
}
// Variables
const quizContainer = document.getElementById('quiz');
const resultsContainer = document.getElementById('results');
const submitButton = document.getElementById('submit');
const myQuestions = [{
category: "wk",
description: "<h2>PART I - WORD KNOWLEDGE. YOU WILL HAVE 7 MINUTES TO COMPLETE.</h2>",
question: "1. <b><u>SMALL</u></b> MOST NEARLY MEANS?",
answers: {
a: "STURDY",
b: "ROUND",
c: "CHEAP",
d: "LITTLE"
},
correctAnswer: "d"
},
{
category: "ar",
description: "<h2>PART II - ARITHMETIC REASONING - YOU WILL HAVE FOURTEEN (14) MINUTES:</h2>",
question: "1. TWO AUTOMOBILES START TOGETHER FROM THE SAME PLACE AND TRAVEL ALONG THE SAME ROUTE. THE FIRST AVERAGES 40 MPH. THE SECOND 55 MPH. HOW MANY MILES FURTHER ALONG THE ROUTE IS THE SECOND AUTO AT THE END OF THE 5TH HOUR?",
answers: {
a: "55 x 5",
b: "55 - 40",
c: "(55x5) - (40x5)",
d: "55/5 - 40/5"
},
correctAnswer: "c"
},
{
category: "pc",
description: "<h2>PART III - PARAGRAPH COMPREHENSION - YOU WILL HAVE SEVEN (7) MINUTES:</h2>",
question: "1. THE DUTY OF THE LIGHTHOUSE KEEPER IS TO KEEP THE LIGHT BURNING NO MATTER WHAT HAPPENS, SO THAT SHIPS WILL BE WARNED OF THE PRESENCE OF DANGEROUS ROCKS. IF A SHIPWRECK SHOULD OCCUR NEAR THE LIGHTHOUSE, EVEN THOUGH HE WOULD LIKE TO AID IN THE RESCUE OF IT'S CREW AND PASSENGERS, THE LIGHTHOUSE KEEPER MUST......",
answers: {
a: "STAY AT HIS LIGHT",
b: "RUSH TO THEIR AID",
c: "TURN OUT THE LIGHT",
d: "QUICKLY SOUND THE SIREN"
},
correctAnswer: "a"
},
{
category: "mk",
description: "<h2>PART IV - MATHEMATICS KNOWLEDGE - YOU WILL HAVE TWELVE (12) MINUTES:</h2>",
question: "1. WHICH OF THE FOLLOWING IS THE SMALLEST PRIME NUMBER GREATER THAN 200?",
answers: {
a: "201",
b: "205",
c: "211",
d: "214"
},
correctAnswer: "c"
},
];
// Kick things off
buildQuiz();
// Pagination
const previousButton = document.getElementById("previous");
const nextButton = document.getElementById("next");
const slides = document.querySelectorAll(".slide");
let currentSlide = 0;
let scores = {
wk: 0,
ar: 0,
pc: 0,
mk: 0,
};
// Show the first slide
showSlide(currentSlide);
// Event listeners
submitButton.addEventListener('click', showResults);
previousButton.addEventListener("click", showPreviousSlide);
nextButton.addEventListener("click", showNextSlide);
})();
</script>CodePudding user response：
The problem in your code is: The button is overlapped by your above div box. So, if you click the button, now the above div is clicking. The solution is: We have put button forward always so the button is always clickable. Thus, the small change in your CSS of button is below:
Its all about z-index in your code. We also don't need z-index if we create the html layouts properly. For now copy this CSS for button.
button {
position: relative;
font-family: 'Work Sans', sans-serif;
font-size: 22px;
background-color: #279;
color: #fff;
border: 0px;
border-radius: 3px;
padding: 20px;
cursor: pointer;
margin-top: 130px;
margin-bottom: 0px;
z-index: 999999;
}