There seems to be an issue with adding padding to the results id div box. The padding is causing a blank yellow box to appear at the bottom before any results are submitted. I've tried to hide this box without success by adding a displayResult() function at the end of my script with a display:none; property, but it ended up hiding it completely.
I could really use some help in figuring out how to solve this problem.
function calculateScore() {
const form = document.forms["form"];
const questions = form.elements["quiz"];
const pointValue = 1;
let score = 0;
for (i = 0; i < questions.length; i++) {
if (questions[i].checked) {
score += pointValue;
}
}
return score;
}
function displayTotal() {
const totalScore = calculateScore();
document.getElementById("result").innerHTML = getFeedback(totalScore);
}
// Feedback messages based on score
const zeroToOne = "<b>Results</b>: It is amazing that you already know all of these things about yourself and didnt need to take the quiz. Maybe you just wanted to see all of the possible result responses? Well played!";
const twoToSeven = "<b>Results</b>: I see that among your many talents and attributes, humility is still part of your charm!";
const eightToThirteen = "<b>Results</b>: It is amazing that you already know all of these things about yourself. Please consider joining our community of engaged honors students like you!";
const fourteenToNineteen = "<b>Results</b>: Did you take this quiz just to show off how well you’d fit into the CC Honors community? Wow, I mean just wow!";
const twentyToTwentyFive = "<b>Results</b>: I see that your streak of dominating assessments is intact. You already knew the outcome when you began the quiz. Way to rock it!";
function getFeedback(score) {
if (score <= 1) {
return zeroToOne;
} else if (score >= 2 && score <= 7) {
return twoToSeven;
} else if (score >= 8 && score <= 13) {
return eightToThirteen;
} else if (score >= 14 && score <= 19) {
return fourteenToNineteen;
} else if (score >= 20 && score <= 25) {
return twentyToTwentyFive;
}
}
// Event listener for submit button
document.getElementById("submit").onclick = displayTotal;
// Reset button function
function resetButton() {
document.getElementById("result").innerHTML = "";
}
// Function to display result
function displayResult() {
const resultBox = document.getElementById("result");
resultBox.style.display = "";
}
.quiz-form {
margin-left: auto !important;
margin-right: auto !important;
max-width: 700px;
}
#form {
text-align: left;
}
.section {
display: flex;
align-items: center;
}
label {
margin-left: .7rem;
margin-bottom: 0;
}
#submit {
background-color: #2f1400;
color: #fff;
border: none;
font-weight: bold;
padding: 10px 15px;
border-radius: 8px;
}
#submit:hover {
background-color: #5d3f24;
}
#reset:hover {
background-color: #5d3f24;
}
#reset {
background-color: #2f1400;
color: #fff;
border: none;
font-weight: bold;
padding: 10px 15px;
border-radius: 9px;
}
input[type="checkbox"] {
min-width: 17px;
min-height: 17px;
cursor: pointer;
}
#result {
background-color: #ffda01;
/* display:none; */
padding: 10px;
}<div class="quiz-form">
<form id="form" name="form">
<fieldset id="controls">
<div class="quiz-questions">
<div class="section">
<input type="checkbox" name="quiz" class="quiz" value="point" />
<label> I enjoy reading for fun.
</label>
</div>
<br>
<div class="section">
<input type="checkbox" name="quiz" class="quiz" value="point" />
<label> I like to write.
</label>
</div>
<br>
<!-- More checkboxes and labels can be added here -->
</div>
<br>
<p>
<input type="button" onclick="displayResult()" name="submit" id="submit" value="Submit" />
<input type="reset" onclick="resetButton()" id="reset" value="Reset">
</p>
<div id="result"></div>
</fieldset>
</form>
<br>