I am trying to add padding to my results id div box but the padding causes it show a blank yellow box at the bottom before any results are submitted. I am trying to hide this box but am having trouble achieving that. I tried adding a displayResult() function at the end of my script, with a display:none; This hid it completely.
Can someone point me in the right direction?
function getScore() {
const form = document.forms["form"];
const quest = form.elements["quiz"];
const pointValue = 1;
let score = 0;
for (i = 0; i < quest.length; i ) {
if (quest[i].checked) {
score = score pointValue;
}
}
return score;
}
function getTotal() {
const totalScore = getScore();
document.getElementById("result").innerHTML = getComment(totalScore);
}
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 fourtTonNine =
'<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 twentyToFive =
'<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 getComment(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 fourtTonNine;
else if (score >= 20 && score <= 25)
return twentyToFive;
}
document.getElementById("submit").onclick = getTotal;
function resetButton() {
document.getElementById("result").innerHTML = "";
}
function displayResult() {
const hide = document.getElementById("result");
hide.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 >
<form id="form" name="form">
<fieldset id="controls">
<div >
<div >
<input type="checkbox" name="quiz" value="point" />
<label> I enjoy reading for fun.
</label>
</div>
<br>
<div >
<input type="checkbox" name="quiz" value="point" />
<label> I like to write.
</label>
</div>
<br>
<div >
<input type="checkbox" name="quiz" value="point" />
<label> I enjoy other forms of self-expression, such as music and art.
</label>
</div>
<br>
<div >
<input type="checkbox" name="quiz" value="point" />
<label> I find discussing ideas with other people exciting.
</label>
</div>
<br>
<div >
<input type="checkbox" name="quiz" value="point" />
<label> I enjoy thinking through complex challenges.
</label>
</div>
<br>
<div >
<input type="checkbox" name="quiz" value="point" />
<label> I am curious about the world.
</label>
</div>
<br>
<div >
<input type="checkbox" name="quiz" value="point" />
<label> I am interested in a wide range of subjects.
</label>
</div>
<br>
<div >
<input type="checkbox" name="quiz" value="point" />
<label> I try to look at issues from a variety of perspectives.
</label>
</div>
<br>
<div >
<input type="checkbox" name="quiz" value="point" />
<label> I like to explain the origins of my opinions.
</label>
</div>
<br>
<div >
<input type="checkbox" name="quiz" value="point" />
<label> I like a good challenge and would prefer to take classes that challenge me.
</label>
</div>
<br>
<div >
<input type="checkbox" name="quiz" value="point" />
<label> My strongest motivations are intrinsic. Some things are worth learning for their own sake.</label>
</div>
<br>
<div >
<input type="checkbox" name="quiz" value="point" />
<label> I enjoy being creative in my work, finding ways to go above and beyond what is expected of me.
</label>
</div>
<br>
<div >
<input type="checkbox" name="quiz" value="point" />
<label> I tend to set high expectations for myself.
</label>
</div>
<br>
<div >
<input type="checkbox" name="quiz" value="point" />
<label> I think a good course is one that is an adventure in thinking and that tackles big issues.
</label>
</div>
<br>
<div >
<input type="checkbox" name="quiz" value="point" />
<label> I pay attention to news about current events.
</label>
</div>
<br>
<div >
<input type="checkbox" name="quiz" value="point" />
<label> I enjoyed the classes in high school that required the most participation.
</label>
</div>
<br>
<div >
<input type="checkbox" name="quiz" value="point" />
<label> I work well independently, completing projects and research on my own.
</label>
</div>
<br>
<div >
<input type="checkbox" name="quiz" value="point" />
<label> I am a self-starter. I don’t need others to tell me I should get to work.
</label>
</div>
<br>
<div >
<input type="checkbox" name="quiz" value="point" />
<label> I am good at scheduling my own time to accomplish my goals.
</label>
</div>
<br>
<div >
<input type="checkbox" name="quiz" value="point" />
<label> I expect to meet interesting people and be exposed to new ideas in college.
</label>
</div>
<br>
<div >
<input type="checkbox" name="quiz" value="point" />
<label> I enjoy discussing books, films, and current events with friends.
</label>
</div>
<br>
<div >
<input type="checkbox" name="quiz" value="point" />
<label> I enjoy listening to what others have to say on a topic, even if their opinions differ from my own.
</label>
</div>
<br>
<div >
<input type="checkbox" name="quiz" value="point" />
<label> I like to test and develop my ideas by sharing them with others.
</label>
</div>
<br>
<div >
<input type="checkbox" name="quiz" value="point" />
<label> I like to collaborate with others because my peers' perspectives often help me to see things in new ways.
</label>
</div>
<br>
<div >
<input type="checkbox" name="quiz" value="point" />
<label> When I do group projects, I take responsibility for my share of the workload.
</label>
</div>
</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>CodePudding user response：
I hide the result ID initially in css and show it when results are in, also note that I edited some html and js.
displayResult function was removed from js and html, getTotal function updated as below
function getTotal() {
const totalScore = getScore();
var result = document.getElementById("result");
result.innerHTML = getComment(totalScore);
result.style.display = "block";
}
First, we cache the result in a variable, then your original innerHTML line to update the content and lastly, we update the style of it to block and thus showing it
Reset function was updated as well to hide the result container, since you are replacing the content of result each time, there is no need to set it to empty string
function getScore() {
const form = document.forms["form"];
const quest = form.elements["quiz"];
const pointValue = 1;
let score = 0;
for (i = 0; i < quest.length; i ) {
if (quest[i].checked) {
score = score pointValue;
}
}
return score;
}
function getTotal() {
const totalScore = getScore();
var result = document.getElementById("result");
result.innerHTML = getComment(totalScore);
result.style.display = "block";
}
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 fourtTonNine =
'<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 twentyToFive =
'<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 getComment(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 fourtTonNine;
else if (score >= 20 && score <= 25)
return twentyToFive;
}
document.getElementById("submit").onclick = getTotal;
function resetButton() {
document.getElementById("result").style.display = "none";
}.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 >
<form id="form" name="form">
<fieldset id="controls">
<div >
<div >
<input type="checkbox" name="quiz" value="point" />
<label> I enjoy reading for fun.
</label>
</div>
<br>
<div >
<input type="checkbox" name="quiz" value="point" />
<label> I like to write.
</label>
</div>
<br>
<div >
<input type="checkbox" name="quiz" value="point" />
<label> I enjoy other forms of self-expression, such as music and art.
</label>
</div>
<br>
<div >
<input type="checkbox" name="quiz" value="point" />
<label> I find discussing ideas with other people exciting.
</label>
</div>
<br>
<div >
<input type="checkbox" name="quiz" value="point" />
<label> I enjoy thinking through complex challenges.
</label>
</div>
<br>
<div >
<input type="checkbox" name="quiz" value="point" />
<label> I am curious about the world.
</label>
</div>
<br>
<div >
<input type="checkbox" name="quiz" value="point" />
<label> I am interested in a wide range of subjects.
</label>
</div>
<br>
<div >
<input type="checkbox" name="quiz" value="point" />
<label> I try to look at issues from a variety of perspectives.
</label>
</div>
<br>
<div >
<input type="checkbox" name="quiz" value="point" />
<label> I like to explain the origins of my opinions.
</label>
</div>
<br>
<div >
<input type="checkbox" name="quiz" value="point" />
<label> I like a good challenge and would prefer to take classes that challenge me.
</label>
</div>
<br>
<div >
<input type="checkbox" name="quiz" value="point" />
<label> My strongest motivations are intrinsic. Some things are worth learning for their own sake.</label>
</div>
<br>
<div >
<input type="checkbox" name="quiz" value="point" />
<label> I enjoy being creative in my work, finding ways to go above and beyond what is expected of me.
</label>
</div>
<br>
<div >
<input type="checkbox" name="quiz" value="point" />
<label> I tend to set high expectations for myself.
</label>
</div>
<br>
<div >
<input type="checkbox" name="quiz" value="point" />
<label> I think a good course is one that is an adventure in thinking and that tackles big issues.
</label>
</div>
<br>
<div >
<input type="checkbox" name="quiz" value="point" />
<label> I pay attention to news about current events.
</label>
</div>
<br>
<div >
<input type="checkbox" name="quiz" value="point" />
<label> I enjoyed the classes in high school that required the most participation.
</label>
</div>
<br>
<div >
<input type="checkbox" name="quiz" value="point" />
<label> I work well independently, completing projects and research on my own.
</label>
</div>
<br>
<div >
<input type="checkbox" name="quiz" value="point" />
<label> I am a self-starter. I don’t need others to tell me I should get to work.
</label>
</div>
<br>
<div >
<input type="checkbox" name="quiz" value="point" />
<label> I am good at scheduling my own time to accomplish my goals.
</label>
</div>
<br>
<div >
<input type="checkbox" name="quiz" value="point" />
<label> I expect to meet interesting people and be exposed to new ideas in college.
</label>
</div>
<br>
<div >
<input type="checkbox" name="quiz" value="point" />
<label> I enjoy discussing books, films, and current events with friends.
</label>
</div>
<br>
<div >
<input type="checkbox" name="quiz" value="point" />
<label> I enjoy listening to what others have to say on a topic, even if their opinions differ from my own.
</label>
</div>
<br>
<div >
<input type="checkbox" name="quiz" value="point" />
<label> I like to test and develop my ideas by sharing them with others.
</label>
</div>
<br>
<div >
<input type="checkbox" name="quiz" value="point" />
<label> I like to collaborate with others because my peers' perspectives often help me to see things in new ways.
</label>
</div>
<br>
<div >
<input type="checkbox" name="quiz" value="point" />
<label> When I do group projects, I take responsibility for my share of the workload.
</label>
</div>
</div>
<br>
<p>
<input type="button" name="submit" id="submit" value="Submit" />
<input type="reset" onclick="resetButton()" id="reset" value="Reset">
</p>
<div id="result"></div>
</fieldset>
</form>
<br>CodePudding user response：
You were on the right track with display: none;, basically you only need to change the style dynamically from javascript in order to show the result div on submit, and hide it again on reset:
function getScore() {
const form = document.forms["form"];
const quest = form.elements["quiz"];
const pointValue = 1;
let score = 0;
for (i = 0; i < quest.length; i ) {
if (quest[i].checked) {
score = score pointValue;
}
}
return score;
}
function getTotal() {
const totalScore = getScore();
// REFERENCE TO THE RESULT DIV ELEMENT
const resDiv = document.getElementById("result");
// SHOW THE RESULT DIV
resDiv.style.display = 'block';
resDiv.innerHTML = getComment(totalScore);
}
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 fourtTonNine =
'<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 twentyToFive =
'<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 getComment(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 fourtTonNine;
else if (score >= 20 && score <= 25)
return twentyToFive;
}
document.getElementById("submit").onclick = getTotal;
function resetButton() {
// REFERENCE TO THE RESULT DIV ELEMENT
const resDiv = document.getElementById("result");
// HIDE THE RESULT DIV
resDiv.style.display = 'none';
resDiv.innerHTML = "";
}
function displayResult() {
const hide = document.getElementById("result");
hide.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 >
<form id="form" name="form">
<fieldset id="controls">
<div >
<div >
<input type="checkbox" name="quiz" value="point" />
<label> I enjoy reading for fun.
</label>
</div>
<br>
<div >
<input type="checkbox" name="quiz" value="point" />
<label> I like to write.
</label>
</div>
<br>
<div >
<input type="checkbox" name="quiz" value="point" />
<label> I enjoy other forms of self-expression, such as music and art.
</label>
</div>
<br>
<div >
<input type="checkbox" name="quiz" value="point" />
<label> I find discussing ideas with other people exciting.
</label>
</div>
<br>
<div >
<input type="checkbox" name="quiz" value="point" />
<label> I enjoy thinking through complex challenges.
</label>
</div>
<br>
<div >
<input type="checkbox" name="quiz" value="point" />
<label> I am curious about the world.
</label>
</div>
<br>
<div >
<input type="checkbox" name="quiz" value="point" />
<label> I am interested in a wide range of subjects.
</label>
</div>
<br>
<div >
<input type="checkbox" name="quiz" value="point" />
<label> I try to look at issues from a variety of perspectives.
</label>
</div>
<br>
<div >
<input type="checkbox" name="quiz" value="point" />
<label> I like to explain the origins of my opinions.
</label>
</div>
<br>
<div >
<input type="checkbox" name="quiz" value="point" />
<label> I like a good challenge and would prefer to take classes that challenge me.
</label>
</div>
<br>
<div >
<input type="checkbox" name="quiz" value="point" />
<label> My strongest motivations are intrinsic. Some things are worth learning for their own sake.</label>
</div>
<br>
<div >
<input type="checkbox" name="quiz" value="point" />
<label> I enjoy being creative in my work, finding ways to go above and beyond what is expected of me.
</label>
</div>
<br>
<div >
<input type="checkbox" name="quiz" value="point" />
<label> I tend to set high expectations for myself.
</label>
</div>
<br>
<div >
<input type="checkbox" name="quiz" value="point" />
<label> I think a good course is one that is an adventure in thinking and that tackles big issues.
</label>
</div>
<br>
<div >
<input type="checkbox" name="quiz" value="point" />
<label> I pay attention to news about current events.
</label>
</div>
<br>
<div >
<input type="checkbox" name="quiz" value="point" />
<label> I enjoyed the classes in high school that required the most participation.
</label>
</div>
<br>
<div >
<input type="checkbox" name="quiz" value="point" />
<label> I work well independently, completing projects and research on my own.
</label>
</div>
<br>
<div >
<input type="checkbox" name="quiz" value="point" />
<label> I am a self-starter. I don’t need others to tell me I should get to work.
</label>
</div>
<br>
<div >
<input type="checkbox" name="quiz" value="point" />
<label> I am good at scheduling my own time to accomplish my goals.
</label>
</div>
<br>
<div >
<input type="checkbox" name="quiz" value="point" />
<label> I expect to meet interesting people and be exposed to new ideas in college.
</label>
</div>
<br>
<div >
<input type="checkbox" name="quiz" value="point" />
<label> I enjoy discussing books, films, and current events with friends.
</label>
</div>
<br>
<div >
<input type="checkbox" name="quiz" value="point" />
<label> I enjoy listening to what others have to say on a topic, even if their opinions differ from my own.
</label>
</div>
<br>
<div >
<input type="checkbox" name="quiz" value="point" />
<label> I like to test and develop my ideas by sharing them with others.
</label>
</div>
<br>
<div >
<input type="checkbox" name="quiz" value="point" />
<label> I like to collaborate with others because my peers' perspectives often help me to see things in new ways.
</label>
</div>
<br>
<div >
<input type="checkbox" name="quiz" value="point" />
<label> When I do group projects, I take responsibility for my share of the workload.
</label>
</div>
</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>CodePudding user response：
How about when you set result, set the style of the result element to display: none and when you press the reset button you remove that style?