MathRiddles2 Example

MathRiddles2 Example -- Source Code

HTML Page -- index.htm

 <!DOCTYPE html>

<!-- MathRiddles2 Example 
     Source code file: index.htm -->

<html lang="en">
    <head>
        <meta content="text/html; charset=utf-8" 
            http-equiv="Content-Type">
        <title>MathRiddles2 Examples</title>
        <link rel="stylesheet" href="styles.css">
        <script src="script.js"></script>
    </head>
    <body>
    <h1>MathRiddles2 Example</h1>
        <ol>
            <li><span id="r1">
                    Why is 6 scared of 7?</span>
                <span id="a1">
                    Answer: Because 7 8 9.</span>
            </li>

            <li><span id="r2">
                    How can you tell that the three fractions
                    x/c, y/c, and z/c all live in a foreign 
                    country?</span>
                <span id="a2">
                    Answer: Because they are all over cs.</span>
            </li>

            <li><span id="r3">
                    What did the repeating decimal number
                    say to pi?</span>
                <span id="a3">
                    Answer: Don't be so irrational.</span>
            </li>
        </ol>
    </body>
</html>

CSS Sheet -- styles.css

 /* Styles for MathRiddles2 Example */
body { background-color: #E0E0FF; 
       color: #000080; 
       font-family: Tahoma, Verdana, sans-serif; }
h1 { color: #800000; }
#a1, #a2, #a3 { display: none; }
li { margin-bottom: 10px; }

JavaScript Script -- script.js

 // MathRiddles2 Example
// Source code file: script.js

// Event handler for Riddle 1 (id="#r1").
function showAnswer1( ) {
    var ans1 = document.getElementById("a1");
    ans1.style.display = "block"
}

// Event handler for Riddle 2 (id="#r2").
function showAnswer2( ) {
    var ans2 = document.getElementById("a2");
    ans2.style.display = "block"
}

// Event handler for Riddle 3 (id="#r3").
function showAnswer3( ) {
    var ans3 = document.getElementById("a3");
    ans3.style.display = "block"
}

// Attach click event handlers for riddles
// (ids #r1, #r2, and #r3).
function init( ) {
    var span1 = document.getElementById("r1");
    span1.addEventListener("click", showAnswer1);
    var span2 = document.getElementById("r2");
    span2.addEventListener("click", showAnswer2);
    var span3 = document.getElementById("r3");
    span3.addEventListener("click", showAnswer3);
}
window.addEventListener("load", init);