Lojban interactive tutor
HTML
<h2>Lojban interactive tutor</h2>
<div id="stages">
</div>
<form action="#" method="get">
Chat: <input type="text" name="message" value="">
</form>
<div id="container">
<noscript>Please enable JavaScript</noscript>
</div>
CSS
#stages
{
margin-bottom: 50px;
}
.bot, .user
{
padding-left: 20px;
background-repeat: no-repeat;
}
.bot
{
color: green;
font-weight: bold;
background-image: url(https://www.redditstatic.com/sprite-reddit.LhM1Cset6Qc.png);
background-position: -88px -790px;
}
.bot.na-jimpe
{
color: red;
}
[lang="jbo"]
{
font-family: monospace;
}
.warning
{
background-color: yellow;
}
JavaScript
// I'm not proud of this code and its lack of documentation - it's just a mockup!
var stages = [0, 1, 2, 3];
var stageTexts = [
'Say "hello" in Lojban (using <span lang="jbo">coi</span>)',
'Introduce yourself (using <span lang="jbo">mi\'e</span>). <p class="warning">Your name must be <b>\"timoteios\"</b> because I need to work on the regex!</p> Remember to use <span lang="jbo">la</span> and to end your cmene with a <span lang="jbo">.</span>',
'Say "goodbye" in Lojban (using <span lang="jbo">co\'o</span>)',
'You finished the tutorial! <p>Please try joining the <a href="https://mw.lojban.org/papri/Lojban_Live_Chat">Lojban community chat</a> and make friends!</p>',
];
$('#stages').html(stages.length ? stageTexts[stages[0]] : "");
$(document).on('submit','form',function(){
$('#container').append('<p class="user">' + $('[name="message"]').val() + '</p>');
if ($('[name="message"]').val() == '') {
$('#container').append('<p class="bot">Please input</p>');
return false;
}
var isFound = false;
var expected = [{
pattern: / coi /i,
response: 'coi',
stage: 0
}, {
pattern: / coi do /i,
response: 'coi do',
stage: 0
}, {
pattern: / coi la mi'imen./i,
response: 'coi',
stage: 0
}, {
pattern: / mi'e la timoteios\./i, // CLL
response: "mi'e la mi'imen.",
stage: 1
}, {
pattern: / mi'e la.timoteios\./i, // some people are going to use dotside
response: "mi'e la mi'imen.",
stage: 1
}, {
pattern: / co'o /i,
response: "co'o",
stage: 2
}];
for (var i = expected.length-1; i >= 0 && !isFound; i--){
$('[name="message"]').each(function(index, value) {
if (isFound === true) {
return;
}
isFound = (" " + $(this).val() + " ").replace(/\s*\.+\s*/g, ".").replace(/\s*\.+\s*/g, ".").replace(/\s+/g, " ").search(expected[i].pattern) != -1;
});
if (isFound === true) {
...