JSFiddle - React, Tailwind, and code Playground

by Brock Callahan

HTML

<h1>How well do you know me? QUIZ</h1>

<p>Relationships with other people require constant checking in. People are always changing, like a river flows. A lot of what we think we know about a person is based on assumption or faulty inference and incomplete information. Our perceptions of people do not often give us a very accurate picture of them.</p>
<p>In this quiz, you'll test your knowledge of me. Do you really know me? Does your perception of me match up with my perception of myself. All these thigns we can explore.</p>
<p id="howMany"></p>
<p id="result"></p>

JavaScript

//quiz questions
question1 = prompt("What day is it?");
question2 = prompt("What month is it?");
question3 = prompt("What year is it?");
question4 = prompt("Who is the US President?");
question5 = prompt("Is gay marriage legal?");

// correct answers
rightAnswer1 = "Friday";
rightAnswer2 = "July";
rightAnswer3 = 2015;
rightAnswer4 = "Barack Obama";
rightAnswer5 = "yes" || "y";

// Keep track of the answers the user gets correct

correct = 0;

if (question1 === rightAnswer1) {
    ++correct;
}

if (question2 === rightAnswer2) {
    ++correct;
}

if (parseInt(question3) === rightAnswer3) {
    ++correct;
}

if (question4 === rightAnswer4) {
    ++correct;
}

if (question5 === rightAnswer5) {
    ++correct;
}

// Tell the user how many answers were correct
document.getElementById('howMany').innerHTML = "You got " + correct + " correct.";

// Award the user based on how many answers they got correct
if (correct === 5) {
    document.getElementById('result').innerHTML = "You won the gold crown.";
} else if (correct >= 3) {
    document.getElementById('result').innerHTML = "You won the silver crown.";
} else if (correct >= 1) {
    document.getElementById('result').innerHTML = "You get the bronze crown.";
} else {
    document.getElementById('result').innerHTML = "You get nothing.";
}