MathRiddles4 Example

MathRiddles4 Example -- Source Code

HTML Page -- index.htm

 <!DOCTYPE html>

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

<html lang="en">
    <head>
        <meta content="text/html; charset=utf-8" 
            http-equiv="Content-Type">
        <title>MathRiddles4 Examples</title>
        <link rel="stylesheet" href="styles.css">
        <script src="script.js"></script>
    </head>
    <body>
        <h1>MathRiddles4 Example</h1>
        <p>Click on a riddle to show its answer.</p>
        <ol>
            <li><span class="r">
                    Why is 6 scared of 7?</span>
                <span class="a">
                    Answer: Because 7 8 9.</span>
            </li>

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

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

CSS Sheet -- styles.css

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

JavaScript Script -- script.js

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

function showAnswer(event) {
    var riddleTag = event.target;
    var answerTag = riddleTag.nextElementSibling;
    answerTag.style.display = "block";
}

function init( ) {
    var riddleSpanTags = 
    document.querySelectorAll(".r")
    for(t of riddleSpanTags) {
        t.addEventListener("click", showAnswer);
    }
}
window.addEventListener("load", init);