Hi there. I’m in a bit over my head and we don’t have anyone really skilled in Java on staff with whom I can consult, so I was hoping a generous someone out there in the community might be able to spot what I’m doing wrong. I have four fitness variables that are calculated from the values entered in various survey questions. The range of the numerical scores for those variables will correspond to one of three risk levels: green, yellow, and red. I am trying to create a simple dynamic display so that the respondent’s numerical score appears in the same font color and background color as the legend below it--just to aid in readability and visual appeal. But I can’t seem to get the syntax down well enough to get the proper colors showing for the proper scores. Is there some sneaky single or double quote or apostrophe vs quotation mark that I’m missing, or is there something else more complex at work here?
Thanks in advance for your time and scrutiny!
- Jason
**************************************
<!DOCTYPE html>
<html>
<head>
<style>
.score-box {
display: inline-block;
padding: 5px 10px;
border-radius: 5px;
font-weight: bold;
}
.red {
background-color: rgb(255, 0, 0);
color: #ffffff;
}
.yellow {
background-color: rgb(255, 255, 0);
color: #000000;
}
.green {
background-color: rgb(102, 255, 0);
color: #000000;
}
</style>
<script>
function applyScoreStyles() {
const scoreElements = document.querySelectorAll('.score');
scoreElements.forEach(el => {
const score = parseInt(el.textContent);
if (score >= 0 && score <= 18) {
el.classList.add('score-box', 'red');
} else if (score >= 19 && score <= 23) {
el.classList.add('score-box', 'yellow');
} else if (score >= 24 && score <= 30) {
el.classList.add('score-box', 'green');
}
});
}
window.onload = applyScoreStyles;
</script>
</head>
<body>
<div style="text-align: left; font-family: Arial, sans-serif; margin-bottom: 20px;">
<strong style="font-size: 1.2em;">These results are your self-reported fitness levels in each of the following domains:</strong>
</div>
<table border="0" cellpadding="5" cellspacing="0" style="width: 100%; font-family: Arial, sans-serif; border-collapse: collapse; margin-bottom: 20px;">
<tbody>
<tr style="border-bottom: 1px solid #ddd;">
<td style="vertical-align: middle; text-align: left; padding: 10px;">Mental Fitness:</td>
<td style="vertical-align: middle; text-align: left; padding: 10px;"><span class="score">"${gr://SC_0UK1v4iSow2RbAa/Score}"</span></td>
</tr>
<tr style="border-bottom: 1px solid #ddd;">
<td style="vertical-align: middle; text-align: left; padding: 10px;">Physical Fitness:</td>
<td style="vertical-align: middle; text-align: left; padding: 10px;"><span class="score">"${gr://SC_e4L9Z5UwfSH11jw/Score}"</span></td>
</tr>
<tr style="border-bottom: 1px solid #ddd;">
<td style="vertical-align: middle; text-align: left; padding: 10px;">Social Fitness:</td>
<td style="vertical-align: middle; text-align: left; padding: 10px;"><span class="score">"${gr://SC_9sgRE67mL9659e6/Score}"</span></td>
</tr>
<tr>
<td style="vertical-align: middle; text-align: left; padding: 10px;">Spiritual Fitness:</td>
<td style="vertical-align: middle; text-align: left; padding: 10px;"><span class="score">"${gr://SC_24Efsw3VmyXnmXc/Score}"</span></td>
</tr>
</tbody>
</table>
<table border="1" cellpadding="5" cellspacing="0" style="width: 100%; font-family: Arial, sans-serif; border-collapse: collapse; margin-bottom: 20px;">
<thead>
<tr style="background-color: #f2f2f2;">
<th scope="col" style="vertical-align: middle; text-align: center; padding: 10px;"><b>Component Score</b></th>
<th scope="col" style="vertical-align: middle; text-align: left; padding: 10px;"><b>Recommendation</b></th>
</tr>
</thead>
<tbody>
<tr>
<td style="background-color: rgb(255, 0, 0); vertical-align: middle; text-align: center; color: #ffffff; padding: 10px;"><b>0-18</b></td>
<td style="vertical-align: middle; text-align: left; padding: 10px;">Consider meeting with a specialist to improve in this domain.</td>
</tr>
<tr>
<td style="background-color: rgb(255, 255, 0); vertical-align: middle; text-align: center; color: #000000; padding: 10px;"><b>19-23</b></td>
<td style="vertical-align: middle; text-align: left; padding: 10px;">This domain may be an area you might consider improving.</td>
</tr>
<tr>
<td style="background-color: rgb(102, 255, 0); vertical-align: middle; text-align: center; color: #000000; padding: 10px;"><b>24-30</b></td>
<td style="vertical-align: middle; text-align: left; padding: 10px;">You indicated substantial fitness in this domain!</td>
</tr>
</tbody>
</table>
<div style="text-align: left; font-family: Arial, sans-serif;">
<strong style="font-size: 1.2em;">This is the end of the survey; thank you for your time and participation. When you are ready, you may navigate away from this content or close your browser/window.</strong>
</div>
</body>
</html>