I’m trying to make an simple score based quiz form using vanilla Html and JavaScript.
This is my html + script code:
function skintypeResult() {
let totalScore = 0;
// Loop through each question
for (const question of form_questions) {
const selectedChoice = document.querySelector(`input[name="${question.name}"]:checked`).value;
totalScore += parseInt(selectedChoice); // Add score directly from choice value
}
// Determine skin type based on score ranges
let skinType = "Undetermined";
if (totalScore >= 6) {
skinType = "Fair Skin";
} else if (totalScore >= 0) {
skinType = "Light to Olive Skin";
} else if (totalScore < 0) {
skinType = "Medium to Dark Skin";
}
// Update result element
const resultElement = document.getElementById("result");
resultElement.textContent = "Your skin type is likely: " + skinType;
}
const form_questions = [
{
name: "eye_color",
choices: {
choice1: 2, // Light blue, gray, or green (fair skin)
choice2: 0, // Blue, gray, or green (neutral)
choice3: -1, // Hazel or light brown (slightly darker)
choice4: -2, // Dark brown (more olive)
choice5: -3 // Brownish black (darkest skin)
},
},
{
name: "hair_color",
choices: {
choice1: 2, // Red or light blond (fair hair)
choice2: 1, // Blond (fair to light brown hair)
choice3: 0, // Dark blond or light brown (neutral)
choice4: -1, // Dark brown (darker hair)
choice5: -2 // Black (darkest hair)
},
},
{
name: "skin_color",
choices: {
choice1: 3, // Ivory white (fairest skin)
choice2: 2, // Fair or pale (fair skin)
choice3: 1, // Fair to beige with golden undertone (light skin)
choice4: 0, // Olive or light brown (neutral skin)
choice5: -2 // Dark brown or black (darker skin)
},
},
]; <form id="quizForm">
<div class="card" id="question1">
<label class="card-header" for="question1">What is your eye color?</label>
<div class="card-choices">
<div class="choice">
<input type="radio" id="eye1" name="eye_color" class="radiobtn" value="choice1">
<label class="radio-text-margin" for="eye1">(Light) blue, gray, or green</label>
</div>
<div class="choice">
<input type="radio" id="eye2" name="eye_color" class="radiobtn" value="choice2">
<label class="radio-text-margin" for="eye2">Blue, gray, or green</label>
</div>
<div class="choice">
<input type="radio" id="eye3" name="eye_color" class="radiobtn" value="choice3">
<label class="radio-text-margin" for="eye3">Hazel or light brown</label>
</div>
<div class="choice">
<input type="radio" id="eye4" name="eye_color" class="radiobtn" value="choice4">
<label class="radio-text-margin" for="eye4">Dark brown</label>
</div>
<div class="choice">
<input type="radio" id="eye5" name="eye_color" class="radiobtn" value="choice5">
<label class="radio-text-margin" for="eye5">Brownish Black</label>
</div>
</div>
</div>
<div class="card" id="question2">
<label class="card-header" for="question2">What is your natural hair color?</label>
<div class="card-choices">
<div class="choice">
<input type="radio" id="hair1" name="hair_color" class="radiobtn" value="choice1">
<label class="radio-text-margin" for="hair1">Red or light blond</label>
</div>
<div class="choice">
<input type="radio" id="hair2" name="hair_color" class="radiobtn" value="choice2">
<label class="radio-text-margin" for="hair2">Blond</label>
</div>
<div class="choice">
<input type="radio" id="hair3" name="hair_color" class="radiobtn" value="choice3">
<label class="radio-text-margin" for="hair3">Dark blond or light brown</label>
</div>
<div class="choice">
<input type="radio" id="hair4" name="hair_color" class="radiobtn" value="choice4">
<label class="radio-text-margin" for="hair4">Dark brown</label>
</div>
<div class="choice">
<input type="radio" id="hair5" name="hair_color" class="radiobtn" value="choice5">
<label class="radio-text-margin" for="hair5"> Black</label>
</div>
</div>
</div>
<div class="card" id="question3">
<label class="card-header" for="question3">What is your natural skin color?</label>
<div class="card-choices">
<div class="choice">
<input type="radio" id="skin1" name="skin_color" class="radiobtn" value="choice1">
<label class="radio-text-margin" for="skin1">Ivory white</label>
</div>
<div class="choice">
<input type="radio" id="skin2" name="skin_color" class="radiobtn" value="choice2">
<label class="radio-text-margin" for="skin2">Fair or pale</label>
</div>
<div class="choice">
<input type="radio" id="skin3" name="skin_color" class="radiobtn" value="choice3">
<label class="radio-text-margin" for="skin3">Fair to beige with golden undertone</label>
</div>
<div class="choice">
<input type="radio" id="skin4" name="skin_color" class="radiobtn" value="choice4">
<label class="radio-text-margin" for="skin4">Olive or light brown</label>
</div>
<div class="choice">
<input type="radio" id="skin5" name="skin_color" class="radiobtn" value="choice5">
<label class="radio-text-margin" for="skin5">Dark brown or black</label>
</div>
</div>
</div>
<button onclick="skintypeResult()" id="submitButton">Evaluate My Skin Type</button>
<p id="result"></p>
</form>There are a lot of problems here and there so I wanted to start on asking why the website does that. It is highly unusual since I haven’t encountered this problem yet until now. The code snippet runner even blacked out.
I already looked into the console log for the problems but there isn’t one at all. Any help is greatly appreciated. I can also provide you guys more context if needed.