File: example.html

<script type="text/javascript" src="Js/jquery.js"></script>
<script type="text/javascript" src="Js/KripkeModels.js"></script>

<script type="text/javascript"> 
$(function() {
    var f = "",test,
    fTester = new formulaTester(),
    formula = $('#formula'),
    result = $('#result'),
    tester = $('#tester'),
    world = $('#world');

    fTester.init('Models/model.xml');

    tester.click(function() {
        if (f = $.trim(formula.val())) {
            test = fTester.test(world.val(),f);
            result.html(test ? 'True' : 'False')
                  .css({color: test ? 'green' : 'red'});
        }else
            formula.focus();
    });
})

</script>

<div style="width:70%">
    <label>Introduce your Formula and test it in the possible worlds: x1,x2,x3...,x6</label>
    <div>
        <input type="text" name="formula" placeholder="{}((P && Q) || r)" id="formula" style="width:260px"/> 
        &nbsp;
        <select id="world" style="padding:4px 5px;border: 1px solid #CCCCCC;font-size: 11px;">
            <option value="x1">x1</option>
            <option value="x2">x2</option>
            <option value="x3">x3</option>
            <option value="x4">x4</option>
            <option value="x5">x5</option>
            <option value="x6">x6</option>
        </select>
        <input type="submit" name="tester" value="Test" id="tester" style="cursor:pointer;width:100px;float: right"/>
    </div>

    <div id="test-result">
        <label>Result: <span style="font-size: larger" id="result"></span></label>
    </div>
</div>
<br />  
<h3>Examples:</h3>
<ul>
    <li><q>(p && q)</q></li>
    <li><q>(P && Q) || r</q></li>
    <li><q>(P && Q) || !!r</q></li>
    <li><q>(P && Q) || []r</q></li>
    <li><q>{}((P && Q) || r)</q></li>
</ul>

<h3>Constants:</h3>
<ul>
    <li>DIAMOND = '{}'</li>
    <li>SQUARE = '[]'</li>
    <li>AND = '&&'</li>   
    <li>OR = '||'</li> 
    <li>NOT = '!!'</li> 
</ul>