Memory Game

Memorizinator Game

A little memory game to help learn big ideas.

Game timer starts automatically (1.5 seconds / word).
Click the words in the proper order.
Game provides feedback about Win, Loss, Player Error.
Need a hint? (All are toggles)
- Show It. Show the full quote.
- Say It. Audio of the quote. [Works in Chrome/Safari.]
- Bold It. The next correct word will be bolded.
- Punctiate It. Turns on capitalization and punctuation.
Mistake? Incorrect answers are red. Click a circle to undo.
Select a new quote (top-right) or Restart game (bottom-right).

D3 Force Simulation Notes

This game leverages the D3 Force Simulation (version 4) mechanics. It incorporates:
- Multi-foci
- Adds nodes
- Adds links and removes links on the fly
- Event handling
- Text centered in nodes (overcomes Firefox vertical-align problem)

<!DOCTYPE html>
<meta charset="utf-8">
<title>Memorizinator</title>
<link rel="stylesheet" href="skinny_skel.css" type="text/css" media="screen" />
<style>
    #container {
        position: relative;
        display: inline-block;
    }

#gameboard {
        border: 1px solid #840000;
        position: relative;
        width: 100%;
        height: 100%;
    }

.gnode > circle:hover {
        stroke: #e0e0e2;
        stroke-width: 2px;
    }

.text { /* centers text in node */
        text-anchor: middle;
        alignment-baseline: central;
        pointer-events: none;
        transform: translateY(1%); /* Firefox */
    }

.next { /* for boldIt hint */
        font-weight: bold;
    }

.link {
        stroke: lightgray;
        stroke-width: 1px;
    }

#selectQuote {
        position: absolute;
        top: 3px;
        right: 2px;
    }

#message {
        position: absolute;
        bottom: 2px;
        left: 3px;
    }

#restart {
        bottom: 2px;
        right: 4px;
    }

#settings {
        bottom: 2px;
        right: 28px;
    }

#setsPop {
        left: 15%;
        top: 20%;
        width: 66%;
        height: 40%;
    }

#timerBar {
        fill: #840000;
        opacity: 0.7;
    }

#timerBarBox {
        fill: #e0e0e2;
    }
</style>
<body>
    <div id="container">
        <svg id="gameboard">
            <rect width="0" height="10" x="3" y="3" id="timerBarBox"></rect>
            <rect width="0" height="10" x="3" y="3" id="timerBar"></rect>
        </svg>

<select id="selectQuote"></select>
        <div id="message"><b>Memorizinator</b> (A little game to help you learn big ideas.)</div>

// ********** EVENTS **********
        $("#selectQuote").change(function () {
            citation = $("#selectQuote").val();
            gameManager('restart');
        });

$("#settings").click(function () { $('#setsPop').show(); $('#setsPop').focus(); }); // focus allows close
        $("#restart").click(function () { gameManager('restart'); });

$("#sayIt").click(function () { gameManager('sayIt'); });
        $("#showIt").click(function () { gameManager('showIt'); });
        $("#boldIt").click(function () { gameManager('boldIt'); });
        $("#punctuateIt").click(function () { gameManager('punctuateIt'); });
        $(".close").click(function () { $('.popup:visible').hide(); });
        $(".popup").on('blur', function () { $('.popup:visible').hide(); });  // close when clicking outside popup

// ********** D3 HAPPENS HERE **********
        // General variablees
        var wordData = [],   // All words (data) from text from json
            wordLinks = [],     // Links (data) in the simulation
            svgWidth = 700,     // Width of the svg palette
            svgHeight = 400,    // Height of the svg palette
            initCount = 7,      // Number of words to show at beginning of game
            foci = [{ x: svgWidth * 0.25, y: svgHeight * 0.45 }, { x: svgWidth * 0.75, y: svgHeight * 0.45 }], // Sets 2 foci on page
            citation = "Williams Shedd",
            quote,               // The quote to be memorized
            boldIt = false,      // Is the boltIt hint be active?
            punctuateIt = false; // Is the punctuateIt on?

// Get svg handle, set up color and radius scale (use word length to set size)
        $("#container").css("width", svgWidth).css("height", svgHeight); 
        var svg = d3.select("#gameboard");
        var radScale = d3.scaleLinear().domain([1, 15]).range([10, 50]);

// Set forces in the simulation
        var simulation = d3.forceSimulation()
            //.force("link", d3.forceLink().id(function (d) { return d.id; }))
            .force("link", d3.forceLink().distance(20).strength(0.6))
            .force("charge", d3.forceManyBody().strength(-50))
            .force("collide", d3.forceCollide(function (d) { return d.rad; }));

// Get quote from json, then start simulation
        function build() {
            d3.json("quotes.json", function (error, quotesData) {

// Populate dropdown if it's empty
                if ($('#selectQuote').children('option').length == 0) {
                    $.each(quotesData.nodes, function (key, value) {
                        option = "<option value='" + value.cit + "' " + (value.cit == citation ? "selected" : "") + ">" + value.cit + "</option>";
                        $('#selectQuote').append(option);
                    });
                }

// Get the selected quote (filter returns an array, length = 1); then split.
                quote = quotesData.nodes.filter(function (obj) { return (obj.cit == citation ? true : false); })[0].text;
                quote = punctuateIt ? quote : quote.toLowerCase().replace(/([^a-z ])/g, '');
                var quoteSplit = quote.replace("-", "- ").split(" ");
                var colors = d3.scaleOrdinal().domain(0, 4).range(colorPalette(quote.length)); // function in colors.js

// Format data
                for (i = 0; i < quoteSplit.length; i++) {
                    wordData.push({
                        word: quoteSplit[i],    // the actual word
                        id: i,          // the original index
                        x: 0,       
                        y: ~~(Math.random() * svgHeight),
                        rad: radScale(quoteSplit[i].length),    // the radius
                        clickOrder: 0,  // what order was it clicked on by user?
                        focus: (i < initCount ? 0 : -1),    // is is part of the answer set; controls focii
                        color: colors(i)
                    })
                }

gameManager("start");
                start();
            });
        }
        build();

// Build the force simulation
        function start() {
            
            // Create links
            var glinks = svg.selectAll(".link")
                .data(wordLinks, function (d) { return d.source.id + "-" + d.target.id; })
                .enter().insert("line", ".gnode").attr("class", "link");
            var glinks = svg.selectAll(".link")
                .data(wordLinks, function (d) { return d.source.id + "-" + d.target.id; })
                .exit().remove()

// Create g-elements (for nodes) based on a subset of wordData
            var gnodes = svg.selectAll("g")
                .data(words("showing", -1), function id(d, i) { return d.id; })
                .enter().append("g").attr("class", function (d) { return "gnode g" + d.id; })
                .classed("next", function (d) { return (boldIt && d.id == 0) ? true : false ; });

var texts = gnodes.append("text")
                .attr("class", function (d) { return "text w" + d.id; }) // Tie into CSS
                .text(function (d) { return (d.word); });

var actions = gnodes.on("click", nodeClicked);

// Link data to simulation and set it in motion.
            simulation.nodes(words("showing", -1)).force("link").links(wordLinks);
            simulation.on("tick", ticked).alpha(0.5).restart();
        }

// Manage node & link movement
        function ticked(e) {
            var k = .2 * simulation.alpha();

svg.selectAll(".gnode").attr("transform", function (d) {
                // Set node location, multi-foci
                d.y += (foci[d.focus].y - d.y) * k;
                d.x += (foci[d.focus].x - d.x) * k;

// But be sure that nodes don't go out-of-bounds
                d.y = Math.max(d.rad, Math.min(svgHeight - d.rad, d.y));
                d.x = Math.max(d.rad, Math.min(svgWidth - d.rad, d.x));

return 'translate(' + [d.x, d.y] + ')';
            });

// Set link locations
            svg.selectAll(".link")
                .attr("x1", function (d) { return d.source.x; })
                .attr("y1", function (d) { return d.source.y; })
                .attr("x2", function (d) { return d.target.x; })
                .attr("y2", function (d) { return d.target.y; });
        }

// User clicked a node
        function nodeClicked(d) {
            if (d.focus == 0) { // A node from the unused side
                d.focus = 1; // Move gnode to other focii.
                var answerCount = words("focus", 1).length; // answerCount includes just-clicked node; equals clickOrder
                var showCount = words("showing", -1).length; // 
                d.clickOrder = answerCount; // Set clickOrder
                if (wordData.length > showCount && words("focus", 0).length < initCount) { wordData[showCount].focus = 0; } // Show another node
                if (answerCount > 1) { wordLinks.push({ "source": words("clickOrder", d.clickOrder - 1)[0].id, "target": d.id }); } // Add link
                start();

svg.selectAll(".text").classed("next", function (d) { return (boldIt && d.index == answerCount) ? true : false; });  // Bold next word

// Check accuracy
                var accurate = true;
                for (i = 0; i < answerCount; i++) {  // cycle thru wordData by clickOrder (base 1); compare with wordData (correct answers)
                    if (words("clickOrder", i + 1)[0].word != wordData[i].word) {
                        accurate = false;
                        $('.c' + words("clickOrder", i + 1)[0].id).css("fill", "red");
                    }
                }
                if (accurate && timerLength >= 0 && wordData.length == answerCount) { gameManager("win"); }

} else {   // d.focus == 1 (a node from the focus) 
                d.focus = 0;
                $('.c' + d.id).css("fill", d.color); // reset color
                d.clickOrder = 0;
                removeLinks(d.id)
                start();
            }
        }

// Return portion of wordData needed.
        function words(key, val) {
            switch (key) {
                case "showing": // returns an array of the shown [focus > -1]
                    return wordData.filter(function (value, index) { return value.focus > -1 ? true : false; });
                    break;
                case "focus": // returns an array of the focus nodes [val = 1] or un-focus [val = 0]
                    return wordData.filter(function (value, index) { return value.focus == val ? true : false; });
                    break;
                case "clickOrder": // returns an array with the single requested clickOrder item
                    return wordData.filter(function (value, index) { return value.clickOrder == val ? true : false; });
                    break;
            }
        }

// Remove links that attach to specific node id's
        function removeLinks(id) {
            for (var i = wordLinks.length - 1; i >= 0; i--) { // reverse order since splicing changes indexes
                if (id == wordLinks[i].source.id || id == wordLinks[i].target.id) {
                    wordLinks.splice(i, 1);
                }
            }
        }

// ********** GAME MECHANICS / MANAGEMENT **********
        var timer,              // Allows timer to be managed from multiple places
            timerLength = 20;   // Allows clean management of timer length

function gameTimer() {
            if (--timerLength >= 0) {
                gameManager("timerBar");
            } else {
                gameManager("loss")
                clearInterval(timer);
            }
        }

});
</script>

https://d3js.org/d3.v4.js

https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js