MathRiddles3 Example

MathRiddles3 Example -- Source Code

HTML Page -- index.htm

 <!DOCTYPE html>

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

<html lang="en">
    <head>
        <meta content="text/html; charset=utf-8" 
            http-equiv="Content-Type">
        <title>MathRiddles3 Examples</title>
        <link rel="stylesheet" href="styles.css">
        <script src="script.js"></script>
    </head>
    <body>
        <h1>MathRiddles3 Example</h1>
        <p>Click on a riddle to show its answer.</p>
        <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 MathRiddles3 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

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

// Click event handler for all riddles.
function showAnswer(event) {
    var spanTag = event.target;
    var answerId = "a" + spanTag.id.charAt(1);
    var answer = document.getElementById(answerId);
    answer.style.display = "block"
}

// Add the event handler to all riddle span tags.
function init( ) {
    var span1 = document.getElementById("r1");
    span1.addEventListener("click", showAnswer);
    var span2 = document.getElementById("r2");
    span2.addEventListener("click", showAnswer);
    var span3 = document.getElementById("r3");
    span3.addEventListener("click", showAnswer);
}
window.addEventListener("load", init);