|
@@ -0,0 +1,160 @@
|
|
|
+<!doctype html>
|
|
|
+<html lang="en">
|
|
|
+<head>
|
|
|
+ <meta charset="UTF-8">
|
|
|
+ <title>Menu Page</title>
|
|
|
+ <link rel="stylesheet" type="text/css" href="../axicon/axicon.min.css" />
|
|
|
+ <link rel="stylesheet" href="../css/study.css">
|
|
|
+ <script src="../js/jquery-3.6.1.min.js"></script>
|
|
|
+ <script src="../js/common.js"></script>
|
|
|
+</head>
|
|
|
+<body>
|
|
|
+<section class="headTitleBar">
|
|
|
+ <div class="headTitle">오늘 漢字 공부할까<font style='font-family:HanWang KaiBold-Gb5;'>?</font></div>
|
|
|
+ <div class="headIcon"><i class="axi axi-menu2"></i></div>
|
|
|
+</section>
|
|
|
+<section style="margin-top:3vh;">
|
|
|
+ <div class='answer'><span id="testNo"></span>아래의 "뜻음"의 漢字로 올바른 것을 선택해 주세요.</div>
|
|
|
+ <div>
|
|
|
+ <div id='testMeaning' ></div>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <div id='example' style="margin-top:10vh;">
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div style="margin-top:5vh;display:none;" id="resultBtn"><center><button class='custom-btn btn-3' onclick="goToResult()"><i class="axi axi-ion-clipboard"></i> 결과보기</button></center></div>
|
|
|
+</section>
|
|
|
+<input type="hidden" id="selDate" />
|
|
|
+<input type="hidden" id="currWord" value="" />
|
|
|
+<input type="hidden" id="currId" value="" />
|
|
|
+</body>
|
|
|
+</html>
|
|
|
+<script>
|
|
|
+ var studyList = null;
|
|
|
+ var index = 0;
|
|
|
+ var currId = 0;
|
|
|
+ $(function(){
|
|
|
+ $("#selDate").val("");
|
|
|
+ //window.connector.getWordContent("today");
|
|
|
+ window.connector.getSelectDate();
|
|
|
+ /*
|
|
|
+ $(".exam").bind('touchstart', function(e){
|
|
|
+ $(".exam").css("color","red");
|
|
|
+ });
|
|
|
+ $(".exam").bind('touchend', function(e){
|
|
|
+ $(".exam").css("color","blue");
|
|
|
+ });
|
|
|
+ */
|
|
|
+ });
|
|
|
+
|
|
|
+ function setSelectDate(selectDate){
|
|
|
+ $("#selDate").val(selectDate);
|
|
|
+ //console.log("DDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDD"+selectDate);
|
|
|
+ if(selectDate!=null && selectDate!="" && selectDate!=undefined){
|
|
|
+ //console.log(">>>>>>>>>>>>>>>>>>>>>>>>>>> select Date >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>");
|
|
|
+ window.connector.getStudyDayContent(selectDate);
|
|
|
+ }else{
|
|
|
+ //console.log(">>>>>>>>>>>>>>>>>>>>>>>>>>> Today >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>");
|
|
|
+ window.connector.getWordContent("today");
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ function setWordContent(list){
|
|
|
+ this.studyList = list;
|
|
|
+ startExam();
|
|
|
+ }
|
|
|
+ function goToResult(){
|
|
|
+ var selDate = $("#selDate").val();
|
|
|
+ if(selDate!=null && selDate!="" && selDate!=undefined){
|
|
|
+ window.connector.goToStudyResultPage(selDate);
|
|
|
+ }else{
|
|
|
+ window.connector.goToStudyResultPage();
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ function startExam(){
|
|
|
+ if( studyList.length-1 >= this.index){
|
|
|
+ $("#example").html("");
|
|
|
+ }
|
|
|
+ if( this.index > studyList.length-1){
|
|
|
+ $("#resultBtn").show();
|
|
|
+ }else{
|
|
|
+ /*
|
|
|
+ if( studyList[this.index].id =="1500" || studyList[this.index].id =="226" ){
|
|
|
+ $("#testWord").css("font-family","HanWang KaiBold-Gb5");
|
|
|
+ $("#testWord").css("padding-top","3vh");
|
|
|
+ }else{
|
|
|
+ $("#testWord").css("font-family","ChosunGs");
|
|
|
+ $("#testWord").css("padding-top","5vh");
|
|
|
+ }
|
|
|
+ */
|
|
|
+
|
|
|
+ $("#testNo").text((this.index+1)+". ");
|
|
|
+ $("#testMeaning").text(studyList[this.index].meaning);
|
|
|
+
|
|
|
+ $("#currWord").val(studyList[this.index].word);
|
|
|
+ $("#currId").val(studyList[this.index].id);
|
|
|
+
|
|
|
+ //setTimeout( function(){readKorean($("#currWord").val(), $("#currId").val());}, 700);
|
|
|
+
|
|
|
+ this.currId = studyList[this.index].id;
|
|
|
+
|
|
|
+ //console.log(" this >>>>>>>>>>>>>>>>>>>>>>>>>"+ studyList[this.index].studyDate );
|
|
|
+
|
|
|
+ window.connector.getTestExample(studyList[this.index].studyDate , studyList[this.index].id);
|
|
|
+ this.index++;
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ function setTestExam(list){
|
|
|
+ //console.log(list);
|
|
|
+ let inContent ="";
|
|
|
+ for(var i=0; i< list.length ; i++){
|
|
|
+
|
|
|
+ if(i==0 || i==2 || i==4 ){
|
|
|
+ inContent ="<div style='margin:0 auto;width:85vw;'>";
|
|
|
+ inContent +=" <div class='hanBtn' onclick='answerCheck("+list[i].id+")' ><span id='A"+list[i].id+"'>"+list[i].word+"</span></div>";
|
|
|
+ }else{
|
|
|
+ inContent +=" <div class='hanBtn' onclick='answerCheck("+list[i].id+")' ><span id='A"+list[i].id+"'>"+list[i].word+"</span></div>";
|
|
|
+ inContent +="</div>";
|
|
|
+ }
|
|
|
+
|
|
|
+ if(i%2==1 || i==(list.length-1)){
|
|
|
+ $("#example").append(inContent);
|
|
|
+ // $("#example").append("<div style='height:1vh'> </div>");
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ function answerCheck(selectId){
|
|
|
+ if(selectId == this.currId){
|
|
|
+ //console.log("=-=-=-=-=-= ok =-=-=-=-=-=- selectId >>"+selectId +" , this.currId >> "+ this.currId);
|
|
|
+ window.connector.updateIncorrect("Y", this.currId);
|
|
|
+ $("#A"+this.currId).css("color" , "yellow");
|
|
|
+ $("#A"+this.currId).parent().css("text-shadow" , "0 0 5px #FFF, 0 0 10px #FFF, 0 0 20px #FFF, 0 0 30px #FFF, 0 0 40px #FFF, 0 0 55px #FFF, 0 0 75px #FFF");
|
|
|
+ answerTrue();
|
|
|
+ }else{
|
|
|
+ console.log("=-=-=-=-=-= fail =-=-=-=-=-=- selectId >> "+selectId +" , this.currId >> "+ this.currId);
|
|
|
+ $("#A"+selectId).css("text-decoration" , "line-through");
|
|
|
+ $("#A"+this.currId).css("color" , "yellow");
|
|
|
+ $("#A"+this.currId).parent().css("text-shadow" , "0 0 5px #FFF, 0 0 10px #FFF, 0 0 20px #FFF, 0 0 30px #FFF, 0 0 40px #FFF, 0 0 55px #FFF, 0 0 75px #FFF");
|
|
|
+ window.connector.updateIncorrect("N", this.currId);
|
|
|
+ answerFalse();
|
|
|
+ }
|
|
|
+ setTimeout("startExam()" ,"1000");
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ function answerFalse(){
|
|
|
+ var audio = new Audio('../sound/false.wav');
|
|
|
+ audio.play();
|
|
|
+ }
|
|
|
+ function answerTrue(){
|
|
|
+ var audio = new Audio('../sound/true.wav');
|
|
|
+ audio.play();
|
|
|
+ }
|
|
|
+
|
|
|
+ function readKorean(word, id){
|
|
|
+ window.connector.readText(word, id);
|
|
|
+ }
|
|
|
+</script>
|