Learning app

Prime association engine - based sample learning app

by Dan Stocker

HTML

<script src="//dl.dropboxusercontent.com/u/9258903/JavaScript/phil-0.2.2.js"></script>
<script src="//dl.dropboxusercontent.com/u/9258903/JavaScript/dessert-0.3.2.js"></script>
<script src="//dl.dropboxusercontent.com/u/9258903/JavaScript/troop-0.5.1.js"></script>
<script src="//dl.dropboxusercontent.com/u/9258903/JavaScript/sntls-0.13.0.js"></script>
<script src="https://dl.dropboxusercontent.com/u/9258903/jsPerf/prime-0.3.2.js"></script>
<p>the word: <input type="text" id="word" /></p>
<p>reminds me of: <span id="response"></span></p>

CSS

body {
    padding-left: 30px;
    padding-top: 20px;
}
    
p, input {
    font-family: arial;
    font-size: 20px;
}

p {
    margin-top: 10px;
    color: gray;
}

span {
    color: #59A9C4;
}

input[type='text'] {
    border: 1px solid #59A9C4;
    border-radius: 5px;
    padding: 2px;
    box-shadow: inset 0 0 3px lightGray;
    color: black;
}

button {
    margin-left: 10px;
    vertical-align: middle;
}

JavaScript

var graph = prime.Graph.create(),
    node = graph.getFetcher(),

    // graph nodes
    root = node(''), // root node connects all nodes
    word, // node for entered word
    response, // response node
    
    // jQuery objects for input and out
    $word = $('#word'),
    $response = $('#response');

window.graph = graph;

// responds to word entered
function respond() {
    // acquire response by hopping to another node
    response = word.getRandomPeerNode();
    
    if (response.load !== root.load) {
        // when response is not the same as root
        // set text and display reinforcement button
        $response.text(response.load);
        if (response !== word) {
            $response.append('<button id="good">makes sense</button>');
        }
    } else {
        // when respons is same as root, try again
        respond();
    }
}


// input box' typing event handler
$word.on('keydown', function(event) {
    if (event.which === 13) {
        // when enter was hit,
        word = node($(this).val());
        if (!root.isPeerNode(word)) {
            // add word node to root when new...
            root.connectTo(word);
        }
        // ...and trigger response
        respond();
    } else {
        // when any other key was hit,
        // clear response field
        $response.empty();
    }
});

// reinforcement button click handler
$(document).on('click', '#good', function() {
    $(this).hide();

    // reinforcing connection between word and response nodes
    word.to(response, 1);
});