{"name":"Duo Speech Cards","key":"duospeechcards","version":"1.0.6","instructions":"Duo speechcards. Embed a list between the tags. Each item should have check(speech rec) and display text separated by a pipe character. eg * I like cats | 私は猫が好きです。","showatto":"1","showplayers":"0","requirecss":"//cdn.jsdelivr.net/npm/glidejs@2.1.0/dist/css/glide.core.min.css","requirejs":"/filter/poodll/amd/src/speech_poodll.js","shim":"","defaults":"language=en|ja","amd":"1","body":"<div id=\"@@AUTOID@@_glide\" class=\"glide\">\n\n    <div class=\"glide__arrows speechcards_toprow\">\n        <button class=\"glide__arrow prev btn btn-success\" data-glide-dir=\"<\">prev</button>\n        <div id='@@AUTOID@@_whatheard' class='speechcards_whatheard'>........</div>\n        <button class=\"glide__arrow next btn btn-success\" data-glide-dir=\">\">Next</button>\n    </div>\n \n    <div class=\"glide__wrapper\">","bodyend":"    </div>\n\n","script":"//get the audio device listening\n//just once trigger the permissions dialog, if needed\nif(!('filter_poodll_navigator_checked' in window)){\n   window.filter_poodll_navigator_checked=true;\n   navigator.mediaDevices.getUserMedia({\"audio\": true});\n}\n\nvar whatheard =$('#' + @@AUTOID@@ + '_whatheard');\nstt = requiredjs_duospeechcards;\nstt.init(@@language@@);\nvar current=0;\nvar items =[];\nvar recentlycaptured= new Date();\n\nfunction cleanText(text){\n  return text.toLowerCase().replace(/[^\\w\\s]|_/g, \"\").replace(/\\s+/g, \" \").trim();\n}\n\n//build the check data(itemindex[0]) and remove from display data(itemindex[1]) \n$(\"#\" + @@AUTOID@@ + \"_glide li\").each(function( index ) {\nvar itemtext = $(this).text().split('|');\nif(itemtext.length>1){\n  items[index]= cleanText(itemtext[0]);\n  $(this).text(itemtext[1]);\n  }else{\n   items[index]= cleanText(itemtext[0]);\n   $(this).text(itemtext[0]);\n }\n});\n\n$(\"#\" + @@AUTOID@@ + \"_glide ul\").addClass('glide__track');\n$(\"#\" + @@AUTOID@@ + \"_glide li\").addClass('glide__slide');\n$(\"#\" + @@AUTOID@@ + \"_glide li\").wrapInner(\"<div class='box'></box>\");\n\n$.getScript('https://cdn.jsdelivr.net/npm/glidejs@2.1.0/dist/glide.min.js').done(function(){\nvar glider;\nfunction setCurrent(index){\n   // stt.stop();\n//console.log('current:' + items[index-1]);\n    stt.onfinalspeechcapture=function(speechtext){\n      recentlycaptured= new Date();\n      whatheard.text(speechtext);\n   \n      if(cleanText(speechtext)==items[index-1]){\n         whatheard.addClass('speechcards_gotit');\n         setTimeout(function(){\n         whatheard.removeClass('speechcards_gotit');\n         whatheard.text('........');\n         glider.go('>');\n         },700);\n      };\n}\n    stt.start();\n}\n glider = $(\"#\" + @@AUTOID@@ + \"_glide\").glide({\n        type: \"carousel\",\n        autoplay: false,\n        afterTransition: function(data){setCurrent(data.index);},\n        afterInit: function(data){setCurrent(data.index);},\n    }).data('glide_api');\n\n});\n\nautoresync = function(){\n  stt.start();\n};\n\ndoAutoCheck = function(){\nsetTimeout(function(){\n         var now = new Date();\n         if((now - recentlycaptured) / 1000 > 4){\n           recentlycaptured=new Date();\n           autoresync();\n            console.log('autosynced');\n         }\n         doAutoCheck();\n },4000);\n};\ndoAutoCheck();\n\n\n\n ","style":".box {\n    text-align: center;\n    color: #fff;\n    width: 50%;\n    background: blue;\n    padding: 54px 18px;\n    font-size: 2em;\n    margin-left: 15px;\n    margin-right: 15px;\n    border-radius: 6px;\n}\n.speechcards_toprow{\n   display: flex;\n}\n.speechcards_whatheard{\n width: 400px;\n border: dotted 1px;\n border-color: green;\n text-align: center;\n margin: 1px;\n}\n.speechcards_gotit{\n color: white;\n background-color: green;\n}","dataset":"","datasetvars":"","alternate":"","alternateend":""}