I've encountered a challenge while working on an HTML and JavaScript form for a personality test. The issue revolves around validation, particularly when the form includes multiple questions with both "MOST" and "LEAST" radio button options.
One specific issue I'm facing is how to alert users if they select the same answer (either "MOST" or "LEAST") for a question.
Despite trying various solutions, I continue to run into problems in this area.
My goal is to notify users if they have chosen the same answer (either "MOST" or "LEAST") for a question.
An image of the HTML layout for one question can be found here: HTML Question
Here is the corresponding Javascript code:
`var DiscModule = (function() {
var d, i, s, c, d2, i2, s2, c2;
function getScores() {
d = i = s = c = 0;
var inputs = document.querySelectorAll('input[type="radio"]');
for (var count = 0, l = inputs.length; count < l; count++) {
if (inputs[count].checked) {
switch (inputs[count].value) {
case "d-most": d++; break;
case "i-most": i++; break;
case "s-most": s++; break;
case "c-most": c++; break;
case "d-least": d--; break;
case "i-least": i--; break;
case "s-least": s--; break;
case "c-least": c--; break;
}
}
}
// checks if all questions are answered
return (d !== 0 && i !== 0 && s !== 0 && c !== 0);
}
// calculations for the test
function calculateWeightedScores() {
if (d >= 6) d2 = 7;
else if (d >= -1) d2 = 6;
else if (d >= -5) d2 = 5;
else if (d >= -9) d2 = 4;
else if (d >= -13) d2 = 3;
else if (d >= -16) d2 = 2;
else d2 = 1;
if (i >= 8) i2 = 7;
else if (i >= 5) i2 = 6;
else if (i >= 2) i2 = 5;
else if (i >= -1) i2 = 4;
else if (i >= -4) i2 = 3;
else if (i >= -8) i2 = 2;
else i2 = 1;
if (s >= 12) s2 = 7;
else if (s >= 8) s2 = 6;
else if (s >= 5) s2 = 5;
else if (s >= 1) s2 = 4;
else if (s >= -2) s2 = 3;
else if (s >= -7) s2 = 2;
else s2 = 1;
if (c >= 6) c2 = 7;
else if (c >= 3) c2 = 6;
else if (c >= -1) c2 = 5;
else if (c >= -3) c2 = 4;
else if (c >= -7) c2 = 3;
else if (c >= -11) c2 = 2;
else c2 = 1;
}
function createCharts() {
var total = 7;
document.querySelector("#d-chart").style.width = (d2 / total * 100) + "%";
document.querySelector("#i-chart").style.width = (i2 / total * 100) + "%";
document.querySelector("#s-chart").style.width = (s2 / total * 100) + "%";
document.querySelector("#c-chart").style.width = (c2 / total * 100) + "%";
}
function showResults() {
document.querySelector("#d-score").innerHTML = d2;
document.querySelector("#i-score").innerHTML = i2;
document.querySelector("#s-score").innerHTML = s2;
document.querySelector("#c-score").innerHTML = c2;
document.querySelector("#scroll-down").classList.remove("hidden");
}
return {
processForm: function() {
if (getScores()) {
calculateWeightedScores();
createCharts();
showResults();
} else {
alert("Please answer all questions before calculating results.");
}
}
};
})();
document.querySelector("#submit").onclick = function() {
DiscModule.processForm();
};`
The following snippet shows the HTML code:
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Triven - DISC Test</title>
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css'>
<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Lato:400,700'><link rel="stylesheet" href="./style.css">
</head>
<body>
<!-- Questions-->
<div class="container"><div class="row">
<div class="page-header col-xs-12">
<h1>test</h1>
</div>
<div id="scroll-down" class="hidden">
</div>
<div class="q col-xs-12 col-sm-6 col-lg-3">
<div class="row">
<div class="col-xs-6">
<span class="badge">1</span><br><br>
Enthusiastic<br>
Daring<br>
Diplomatic<br>
Satisfied
</div>
<div class="col-xs-3 text-center">
MOST<br><br>
<input type="radio" name="q1most" value="i-most"><br>
<input type="radio" name="q1most" value="d-most"><br>
<input type="radio" name="q1most" value="c-most"><br>
<input type="radio" name="q1most" value="s-most">
</div>
<div class="col-xs-3 text-center">
LEAST<br><br>
<input type="radio" name="q1least" value="i-least"><br>
<input type="radio" name="q1least" value="d-least"><br>
<input type="radio" name="q1least" value="c-least"><br>
<input type="radio" name="q1least" value="s-least">
</div>
</div>
</div>