I've been looking into using the bold() method, but I am not sure how to apply it with what I currently have?
I'd like to bold the word "Results" in the beginning of all my string responses the user gets at the bottom of the DOM and keep the rest of the string normal. What would be the best way to achieve this function?
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 =
"Results: 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 =
"Results: I see that among your many talents and attributes, humility is still part of your charm!";
const eightToThirteen =
'Results: 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 =
'Results: 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 =
'Results: 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 = "";
}<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>
<p id="result"></p>
</fieldset>
</form>CodePudding user response：
Since you are using innerHtml, I think you can just wrap 'Results' in a tag.
'<b>Results</b> the rest of your string...'
CodePudding user response：
As an alternative (in addition to the @personaelit's comment), you can update the string values directly inside JS getComment function, yielding to the same result:
function getComment(score) {
if (score <= 1)
return zeroToOne.replace('Results', '<b>' 'Results' '</b>');
else if (score >= 2 && score <= 7)
return twoToSeven.replace('Results', '<b>' 'Results' '</b>');
else if (score >= 8 && score <= 13)
return eightToThirteen.replace('Results', '<b>' 'Results' '</b>');
else if (score >= 14 && score <= 19)
return fourtTonNine.replace('Results', '<b>' 'Results' '</b>');
else if (score >= 20 && score <= 25)
return twentyToFive.replace('Results', '<b>' 'Results' '</b>');
}