Skip to content

Instantly share code, notes, and snippets.

@stormsweeper
Created February 25, 2019 03:51
Show Gist options
  • Save stormsweeper/0c97608f64391261efcf6f5d4de12e9a to your computer and use it in GitHub Desktop.
Save stormsweeper/0c97608f64391261efcf6f5d4de12e9a to your computer and use it in GitHub Desktop.
Exported from Popcode. Click to import: https://popcode.org/?gist=0c97608f64391261efcf6f5d4de12e9a

07.1 Basic Conditionals

For each of the test questions, use conditionals to check whether the correct answer was provided by the user. The click handlers for each question has been provided for you (except for the last question).

Go through each question, and do the following:

  1. ** English **: Write an if/else conditional statement to check if the value of the variable englishInput is correct (the answer should be Mon).

  2. ** Social Studies **: Write an if/else conditional statement to check if the value of the variable ssInput is correct (the answer should be Albany). If it is correct, use .text() to display a message in the div with the ID ssMessage. (Hint: refer to the code in the previous question)

  3. ** Math **: Write an if/else conditional statement to check if the value of the variable mathInput is correct (the answer should be the number 30). If it is correct, use .text() to display a message in the div with the ID mathMessage.

  4. Science: Write a click handler for the button in the science question (refer to the HTML for the ID of the button). Create a variable that stores the value of the input in the science question. Then write an if/else conditional statement to check if the value of the variable you created is the correct answer (the answer is solid). If it is correct, use .text() to display a message in the div with the ID scienceMessage. (Hint: refer to the code in the previous questions for guidance)

Done early?

When a student gets the answer right, make it so their answer turns green. If they get it wrong, make their answer turn red.

<!DOCTYPE html>
<html>
<head>
<title>07.1 Basic Conditionals: Are you smarter than a second grader?</title>
</head>
<body>
<h1>Second Grade End of Year Test</h1>
<div class="englishDiv">
<h3>1. English Language Arts</h3>
<p>What is the abbreviation for Monday?</p>
<input class="english" placeholder="your answer">
<button class="englishButton">Submit</button>
<div class="englishMessage"></div>
</div>
<div class="ssDiv">
<h3>2. Social Studies</h3>
<p>What is the capital of New York?</p>
<input class="socialStudies" placeholder="your answer">
<button class="ssButton">Submit</button>
<div class="ssMessage"></div>
</div>
<div class="mathDiv">
<h3>3. Math</h3>
<p>What is 10 + 10 + 10?</p>
<input class="math" placeholder="your answer">
<button class="mathButton">Submit</button>
<div class="mathMessage"></div>
</div>
<div class="sciDiv">
<h3>4. Science </h3>
<p>Is ice a solid, liquid, or gas?</p>
<input class="science" placeholder="your answer">
<button class="scienceButton">Submit</button>
<div class="scienceMessage"></div>
</div>
</body>
</html>
{"enabledLibraries":["jquery"],"hiddenUIComponents":["console","editor.css","instructions","editor.javascript","editor.html"]}
// 1. English Section:
$(".englishButton").click(function() {
var englishInput = $(".english").val();
if (englishInput === 'Mon') {
// display this text if the answer is correct
$(".englishMessage").text("Correct!");
} else {
// display this text if the answer is incorrect
$(".englishMessage").text("Wrong! Try again.");
}
});
// 2. Social Studies section
$(".ssButton").click(function() {
var ssInput = $(".socialStudies").val();
if (ssInput === 'Albany') {
// display this text if the answer is correct
$(".ssMessage").text("Correct!");
} else {
// display this text if the answer is incorrect
$(".ssMessage").text("Wrong! Try again.");
}
});
// 3. Math section
$(".mathButton").click(function() {
var mathInput = $(".math").val();
// below, we are using the parseInt() function to convert the input value (a string) into a number
mathInput = parseInt(mathInput);
if (mathInput === 30) {
// display this text if the answer is correct
$(".mathMessage").text("Correct!");
} else {
// display this text if the answer is incorrect
$(".mathMessage").text("Wrong! Try again.");
}
});
// 4. Science section
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment