機能追加とデザイン反映

takumi-style/index_ie.html

@@ -8,6 +8,7 @@
  <!-- web app for Android -->
  <!-- web app for Android -->
  <meta name="mobile-web-app-capable" content="yes" />
  <meta name="mobile-web-app-capable" content="yes" />
 
 
+ <script src="js/jquery-3.5.0.min.js"></script>
  <script src="js/anime.min.js"></script>
  <script src="js/anime.min.js"></script>
  <script src="js/json.js"></script>
  <script src="js/json.js"></script>
  <script src="js/topAnime.js"></script>
  <script src="js/topAnime.js"></script>
@@ -277,6 +278,10 @@
 
 
   <div id="result_plate" class="vanish">
   <div id="result_plate" class="vanish">
    <!------------------------------------------------------------------------------------ begin : ans_plate -->
    <!------------------------------------------------------------------------------------ begin : ans_plate -->
+   <img src="images/result/arr_yes.png" class="vanish" id="arr_yes" width="40" height="40">
+   <img src="images/result/arr_no.png" class="vanish" id="arr_no" width="40" height="40">
+   <img src="" class="vanish" id="yes_btn" width="200" height="auto">>
+   <img src="" class="vanish" id="no_btn" width="200" height="auto">>
    <div id="result_title"><img src="images/result/ribbon_2_4.png" /></div>
    <div id="result_title"><img src="images/result/ribbon_2_4.png" /></div>
    <div id="result_area">
    <div id="result_area">
     <img id="result_main" src="images/result/main_2.png" />
     <img id="result_main" src="images/result/main_2.png" />

takumi-style/js/levelMenu_ie.js

@@ -110,7 +110,7 @@ function levelSelectMenu(et) {
  function quizSelectFunc(e) { //---------------------------------------------------------------------箱をタップしたので開始（private）
  function quizSelectFunc(e) { //---------------------------------------------------------------------箱をタップしたので開始（private）
   var lv = this.id.split("_")[1]; //---1:初級、2:中級、3:上級、4:博士級
   var lv = this.id.split("_")[1]; //---1:初級、2:中級、3:上級、4:博士級
   var clr = this.id.split("_")[2]; //---色は数値はリンクしていない、htmlのidによる。
   var clr = this.id.split("_")[2]; //---色は数値はリンクしていない、htmlのidによる。
-  console.log(clr)
+//  console.log(clr)
   goQuizFunc(lv, clr);
   goQuizFunc(lv, clr);
   takumiObj.hideFuki();
   takumiObj.hideFuki();
   doctorObj.setSmallFuki();
   doctorObj.setSmallFuki();

takumi-style/js/quizMaster.js

@@ -262,7 +262,8 @@ function quizMaster(et) {
   androidConnect ? alert("playSE#seStop") : console.log("playSE#seStop"); //----------sound : seStop
   androidConnect ? alert("playSE#seStop") : console.log("playSE#seStop"); //----------sound : seStop
   document.getElementById("result_title").classList.remove("vanish");
   document.getElementById("result_title").classList.remove("vanish");
   document.getElementById("result_main").classList.remove("vanish");
   document.getElementById("result_main").classList.remove("vanish");
-  resultPlate.classList.remove("randomize");
+
+  resultPlate.classList.remove("randomize" + (Math.floor(Math.random() * 3) + 1));
   myObj.hideResult();
   myObj.hideResult();
   topAnime.dispFunc();
   topAnime.dispFunc();
  }
  }
@@ -279,7 +280,7 @@ function quizMaster(et) {
   androidConnect ? alert("playSE#seStop") : console.log("playSE#seStop"); //----------sound : seStop
   androidConnect ? alert("playSE#seStop") : console.log("playSE#seStop"); //----------sound : seStop
   document.getElementById("result_title").classList.remove("vanish");
   document.getElementById("result_title").classList.remove("vanish");
   document.getElementById("result_main").classList.remove("vanish");
   document.getElementById("result_main").classList.remove("vanish");
-  resultPlate.classList.remove("randomize");
+  resultPlate.classList.remove("randomize" + (Math.floor(Math.random() * 3) + 1));
 
 
   myObj.hideResult();
   myObj.hideResult();
   levelSelectMenu.dispFunc();
   levelSelectMenu.dispFunc();
@@ -363,18 +364,34 @@ function quizMaster(et) {
     }); //------ anime
     }); //------ anime
    }
    }
   }); //------ anime
   }); //------ anime
+
   setTimeout(function () {
   setTimeout(function () {
    document.getElementById("result_title").classList.add("vanish");
    document.getElementById("result_title").classList.add("vanish");
    document.getElementById("result_main").classList.add("vanish");
    document.getElementById("result_main").classList.add("vanish");
-   resultPlate.classList.add("randomize");
+   var rand = (Math.floor(Math.random() * 3) + 1);
+   resultPlate.classList.add("randomize" + rand);
+   document.getElementById("arr_yes").classList.remove("vanish");
+   document.getElementById("arr_no").classList.remove("vanish");
+   document.getElementById("yes_btn").classList.remove("vanish");
+   document.getElementById("no_btn").classList.remove("vanish");
+   document.getElementById("yes_btn").classList.add("yes_btn" + rand);
+   document.getElementById("no_btn").classList.add("no_btn" + rand);
+   if (rand == 1) {
+    $("#yes_btn").attr("src", "images/result/yesbtn1.png");
+    $("#no_btn").attr("src", "images/result/nobtn1.png");
+   } else if (rand == 2) {
+    $("#yes_btn").attr("src", "images/result/yesbtn2.png");
+    $("#no_btn").attr("src", "images/result/nobtn2.png");
+   } else if (rand == 3) {
+    $("#yes_btn").attr("src", "images/result/yesbtn3.png");
+    $("#no_btn").attr("src", "images/result/nobtn3.png");
+   }
    anime({
    anime({
     targets: "#result_plate",
     targets: "#result_plate",
     opacity: [0, 1],
     opacity: [0, 1],
     easing: "easeOutSine",
     easing: "easeOutSine",
     duration: 500
     duration: 500
    }); //------ anime
    }); //------ anime
-   document.getElementById("result_top_button").classList.remove("vanish");
-   document.getElementById("result_select_button").classList.remove("vanish");
    anime({
    anime({
     targets: "#result_top_button",
     targets: "#result_top_button",
     opacity: [0, 1],
     opacity: [0, 1],
@@ -387,13 +404,34 @@ function quizMaster(et) {
     easing: "easeOutSine",
     easing: "easeOutSine",
     duration: 500
     duration: 500
    }); //------ anime
    }); //------ anime
-  }, 5000);
-
+   document.getElementById("result_top_button").classList.remove("vanish");
+   document.getElementById("result_select_button").classList.remove("vanish");
+  }, 2000);
  }
  }
-
-
-
-
  return myObj;
  return myObj;
-
 }
 }
+
+$(function () {
+ $("#yes_btn").on("click", function () {
+  $("#result_plate").addClass("answer1");
+  document.getElementById("arr_yes").classList.add("vanish");
+  document.getElementById("arr_no").classList.add("vanish");
+  document.getElementById("yes_btn").classList.add("vanish");
+  document.getElementById("no_btn").classList.add("vanish");
+ });
+ $("#no_btn").on("click", function () {
+  $("#result_plate").addClass("answer2");
+  document.getElementById("arr_yes").classList.add("vanish");
+  document.getElementById("arr_no").classList.add("vanish");
+  document.getElementById("yes_btn").classList.add("vanish");
+  document.getElementById("no_btn").classList.add("vanish");
+ });
+ $("#result_top_button").on("click", function () {
+  $("#result_plate").removeClass();
+  $("#result_plate").addClass("vanish");
+ });
+ $("#result_select_button").on("click", function () {
+  $("#result_plate").removeClass();
+  $("#result_plate").addClass("vanish");
+ });
+});