aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorAche <ache@ache.one>2016-08-25 22:15:46 +0200
committerAche <ache@ache.one>2016-08-25 22:15:46 +0200
commit4093f47b7bc6dd3c22bf6d3f944c606389b996f8 (patch)
tree16076dd464c4805bb27a8f07f58bbf927cc8a796
Init commit
Diffstat
-rw-r--r--hiragana_romaji.json49
-rw-r--r--index.html47
-rw-r--r--synhestesis.js119
3 files changed, 215 insertions, 0 deletions
diff --git a/hiragana_romaji.json b/hiragana_romaji.json
new file mode 100644
index 0000000..6676367
--- /dev/null
+++ b/hiragana_romaji.json
@@ -0,0 +1,49 @@
+{ "answer" : [
+ {"key": "あ", "value" : "a", "style" : "font-size:4em;"},
+ {"key": "い", "value" : "i", "style" : "font-size:3em;"},
+ {"key": "う", "value" : "u", "style" : "font-size:3em;"},
+ {"key": "え", "value" : "e", "style" : "font-size:3em;"},
+ {"key": "お", "value" : "o", "style" : "font-size:3em;"},
+ {"key": "か", "value" : "ka", "style" : "font-size:3em;"},
+ {"key": "き", "value" : "ki", "style" : "font-size:3em;"},
+ {"key": "く", "value" : "ku", "style" : "font-size:3em;"},
+ {"key": "け", "value" : "ke", "style" : "font-size:3em;"},
+ {"key": "こ", "value" : "ko", "style" : "font-size:3em;"},
+ {"key": "さ", "value" : "sa", "style" : "font-size:3em;"},
+ {"key": "し", "value" : "shi", "style" : "font-size:3em;"},
+ {"key": "す", "value" : "su", "style" : "font-size:3em;"},
+ {"key": "せ", "value" : "se", "style" : "font-size:3em;"},
+ {"key": "そ", "value" : "so", "style" : "font-size:3em;"},
+ {"key": "た", "value" : "ta", "style" : "font-size:3em;"},
+ {"key": "ち", "value" : "chi", "style" : "font-size:3em;"},
+ {"key": "つ", "value" : "tsu", "style" : "font-size:3em;"},
+ {"key": "て", "value" : "te", "style" : "font-size:3em;"},
+ {"key": "と", "value" : "to", "style" : "font-size:3em;"},
+ {"key": "な", "value" : "na", "style" : "font-size:3em;"},
+ {"key": "に", "value" : "ni", "style" : "font-size:3em;"},
+ {"key": "ぬ", "value" : "nu", "style" : "font-size:3em;"},
+ {"key": "ね", "value" : "ne", "style" : "font-size:3em;"},
+ {"key": "の", "value" : "no", "style" : "font-size:3em;"},
+ {"key": "は", "value" : "ha", "style" : "font-size:3em;"},
+ {"key": "ひ", "value" : "hi", "style" : "font-size:3em;"},
+ {"key": "ふ", "value" : "fu", "style" : "font-size:3em;"},
+ {"key": "へ", "value" : "he", "style" : "font-size:3em;"},
+ {"key": "ほ", "value" : "ho", "style" : "font-size:3em;"},
+ {"key": "ま", "value" : "ma", "style" : "font-size:3em;"},
+ {"key": "み", "value" : "mi", "style" : "font-size:3em;"},
+ {"key": "む", "value" : "mu", "style" : "font-size:3em;"},
+ {"key": "め", "value" : "me", "style" : "font-size:3em;"},
+ {"key": "も", "value" : "mo", "style" : "font-size:3em;"},
+ {"key": "や", "value" : "ya", "style" : "font-size:3em;"},
+ {"key": "ゆ", "value" : "yu", "style" : "font-size:3em;"},
+ {"key": "よ", "value" : "yo", "style" : "font-size:3em;"},
+ {"key": "ら", "value" : "ra", "style" : "font-size:3em;"},
+ {"key": "り", "value" : "ri", "style" : "font-size:3em;"},
+ {"key": "る", "value" : "ru", "style" : "font-size:3em;"},
+ {"key": "れ", "value" : "re", "style" : "font-size:3em;"},
+ {"key": "ろ", "value" : "ro", "style" : "font-size:3em;"},
+ {"key": "わ", "value" : "wa", "style" : "font-size:3em;"},
+ {"key": "を", "value" : "wo", "style" : "font-size:3em;"},
+ {"key": "ん", "value" : "n", "style" : "font-size:3em;"}
+]}
+ \ No newline at end of file
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..2d72f5f
--- /dev/null
+++ b/index.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8" />
+ <title>Synhestesis - Test</title>
+ </head>
+ <style type="text/css">
+ div.fileinputs {
+ position: relative;
+ }
+ div.fakefile {
+ position: absolute;
+ top: 0px;
+ left: 0px;
+ z-index: 1;
+ }
+ div.fakefile input[type=button] {
+ /* enough width to completely overlap the real hidden file control */
+ cursor: pointer;
+ }
+ div.fileinputs input.file {
+ position: relative;
+ text-align: right;
+ -moz-opacity:0 ;
+ filter:alpha(opacity: 0);
+ opacity: 0;
+ z-index: 2;
+ }
+ </style>
+ <body>
+ <div style="margin-top:5%;margin-left:auto;margin-right:auto;width:80%;height:100px;z-index:4;" id="onTop">
+ <span id="compteur"></span>
+ <span id="ratio"></span>
+
+ <div class="fileinputs">
+ <input type="file" class="file" id="getFile" />
+
+ <div class="fakefile">
+ <input type="button" value="Open" />
+ </div>
+ </div>
+ </div>
+ <div id="output" style="margin-left:auto;margin-right:auto;width:300px;height:300px;">
+ </div>
+ <script type="text/javascript" src="./synhestesis.js"></script>
+ </body>
+</html>
diff --git a/synhestesis.js b/synhestesis.js
new file mode 100644
index 0000000..7169f61
--- /dev/null
+++ b/synhestesis.js
@@ -0,0 +1,119 @@
+function shuffle(a) {
+ var j, x, i;
+ for (i = a.length; i; i--) {
+ j = Math.floor(Math.random() * i);
+ x = a[i - 1];
+ a[i - 1] = a[j];
+ a[j] = x;
+ }
+}
+
+onTop = document.getElementById('onTop');
+inputAnswer = document.createElement("input");
+passButt = document.createElement("input");
+outputAnswer = document.getElementById("output");
+outputStyleBase = outputAnswer.style.cssText;
+compteurSpan = document.getElementById('compteur');
+ratioSpan = document.getElementById('ratio');
+asPass = false
+
+function handleFileSelect(evt) {
+
+ var files = evt.target.files; // FileList object
+ var file = files[0];
+
+ var reader = new FileReader();
+
+ inputAnswer.style.float = "right";
+ passButt.type = "button";
+ passButt.style.float = "right";
+ passButt.value = "Pass";
+
+
+
+
+ reader.onload = function (evt) {
+ var res = JSON.parse(evt.target.result);
+ var indexRes = 0;
+ var cmpGood = 0;
+ var cmpBad = 0;
+ for( var i = 0, elem = res.answer[0] ; i < res.answer.length ; elem = res.answer[++i]) {
+ console.log(elem.key + " -> " + elem.value);
+ }
+ shuffle(res.answer);
+ compteurSpan.innerText = "0/" + res.answer.length;
+ ratioSpan.innerText = "∅";
+ outputAnswer.innerText = res.answer[indexRes].key;
+ if( res.answer[indexRes].style )
+ outputAnswer.style = outputStyleBase + res.answer[indexRes].style;
+ function pass() {
+ console.log(inputAnswer.value)
+ asPass = true
+ inputAnswer.value = "" + res.answer[indexRes].value
+ console.log(inputAnswer.value)
+ }
+ inputAnswer.onkeydown = function(event) {
+ inputAnswer.style.borderColor = ""
+ var ev = event || window.event;
+ var key = ev.keyCode || ev.which || ev.charCode;
+ if( key == 13 ) {
+ if( ev.shiftKey ) {
+ pass();
+ } else {
+ inputAnswer.change();
+ }
+ }
+ }
+ passButt.onclick = pass
+ inputAnswer.change = function() {
+ if( inputAnswer.value == res.answer[indexRes].value ) {
+ if( ! asPass ) {
+ cmpGood+=1;
+ console.log("Good");
+ }else {
+ console.log("Passed : " + res.answer[indexRes].value);
+ asPass = false;
+ }
+ inputAnswer.style.borderColor = "#0F0"
+
+ inputAnswer.value = "";
+ if( indexRes+1 < res.answer.length ) {
+ indexRes++;
+ outputAnswer.innerText = res.answer[indexRes].key;
+ } else {
+ onTop.removeChild(inputAnswer);
+ onTop.removeChild(passButt);
+ if( cmpBad == 0 ) {
+ outputAnswer.innerText = "Perfect !";
+ }else if( cmpGood/cmpBad > 0.9 * (res.answer.length + cmpBad) ) {
+ outputAnswer.innerText = "Almost perfect !";
+ }else if( cmpGood/cmpBad > 0.75 * (res.answer.length + cmpBad) ) {
+ outputAnswer.innerText = "Good !";
+ }else if( cmpGood/cmpBad > 0.5 * (res.answer.length + cmpBad) ) {
+ outputAnswer.innerText = "Average";
+ }else if( cmpGood/cmpBad > 0.25 * (res.answer.length + cmpBad) ) {
+ outputAnswer.innerText = "Can do better";
+ }else {
+ outputAnswer.innerText = "Bad";
+ }
+ }
+ } else {
+ console.log("Bad");
+ inputAnswer.style.borderColor = "red"
+ cmpBad+=1;
+ }
+
+ if( cmpBad > 0 )
+ ratioSpan.innerText = "" + cmpGood/cmpBad;
+ else
+ ratioSpan.innerText = "∅";
+
+
+ compteurSpan.innerText = indexRes + "/" + res.answer.length;
+ }
+ onTop.appendChild(inputAnswer);
+ onTop.appendChild(passButt);
+ }
+ reader.readAsText(file, "UTF-8");
+}
+document.getElementById('getFile').addEventListener('change', handleFileSelect, false); \ No newline at end of file
By 🦊 with love. ❤