Lesson Twenty One: Designing the Reading Comprehension Program

Hopefully you will be developing your own history websites that you can present to your class, friends, and parents. Perhaps you'll even decide to give The History Tree permission to link to your site. If so you should include a reading comprehension challenge. By creating the challenge you will reinforce your knowledge of the history and create a method to test your audience.

Follow these steps to create your reading comprehension program:

Enter this code to establish the first section of your HTML file (remember do not use the | pipe sign) and save the file as readingcomp.html (notice the link to the readingcomp.css file and notice the link to the readingcomp.js file):

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>The Mollusks Reading Comprehension Challenge</title>
<link rel="stylesheet" type="text/css" href="readingcomp.css">
</head>
<body>
<h1>The Mollusks Reading Comprehension Challenge</h1>
<div>
<h2>Where do most mollusks live?</h2>
<p id="answer1"><input type="button" id="select1" value="select" onclick="buttonincorrect();">In the sky</p>
<p id="answer2"><input type="button" id="select2" value="select" onclick="buttonincorrect();">On land</p>
<p id="answer3"><input type="button" id="select3" value="select" onclick="buttoncorrect();">In water</p>
<p id="answer4"><input type="button" id="select4" value="select" onclick="buttonincorrect();">On mountain tops</p>
<p><input type="button" id="p1" value="">Points</p>
</div>
<script src="readingcomp.js"></script>
<body>
<html>

Enter this code to establish the readingcomp.css file and then save the file:

body { color: maroon;
background-color: tan;
margin: 40px;
padding: 20px;
line-height: 1.6em;
font-size: large;
font-family: Georgia, "Times New Roman", Times, serif; }
input { color: maroon;
background-color: tan;
padding: 2px;
font-size: 100%;
border: 2px solid maroon;
margin: 10px;
width: 150px; }
div { border: 2px solid maroon;
margin: 5px; }
p { font-size: 120%; }

Enter this code to establish the readingcomp.js file and then save the file:

var score = 0;
function buttoncorrect() {
var button = document.getElementById("p1");
score += 20;
var points1 = 20;
button.value = points1;
var button = document.getElementById("tp1");
button.value = score;
var a1 = document.getElementById("answer1");
a1.innerHTML = "";
var a2 = document.getElementById("answer2");
a2.innerHTML = "";
var a3 = document.getElementById("answer3");
a3.innerHTML = "That's Correct: Most mollusks live in the water";
var a4 = document.getElementById("answer4");
a4.innerHTML = "";
}

function buttonincorrect() {
var button = document.getElementById("p1");
var points1 = 0;
button.value = points1;
var a1 = document.getElementById("answer1");
a1.innerHTML = "Incorrect: The correct answer is: In the water";
var a2 = document.getElementById("answer2");
a2.innerHTML = "";
var a3 = document.getElementById("answer3");
a3.innerHTML = "";
var a4 = document.getElementById("answer4");
a4.innerHTML = "";
}

Your program should look like this:

Once you have your program running correctly go to the mollusk page of the world history section and view the reading comprehension challenge. See if you can add the other questions to your program.
The next two lessons explain how all this coding works.

Lesson Twenty Two: How it Works - HTML

Coding

Lesson Twenty One: Designing the Reading Comprehension Program