マルバツクイズメーカー◯☓

/*

<script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/4.1.1/crypto-js.min.js"></script>
*/

function enc(val="-", salt="0"){
  var encrypted = CryptoJS.AES.encrypt(val, salt);
  return encrypted
}

function dec(val="-", salt="0"){
  val = val.replace(/ /img,'+');
  var decrypted = CryptoJS.AES.decrypt(val, salt);
  decrypted = decrypted.toString(CryptoJS.enc.Utf8);
  return decrypted;
}

$(function(){
  var s = location.search.substring(1) || '';
  console.log(s);

  var w = document.body.clientWidth;
  var h  = window.innerHeight;
  var cx  = w/4;
  var cy  = h/2;
  var cr  = Math.min(cx,cy)/2;
  var stage = 1;
  $demo = $('#demo');
  $stage = $('<div>',{id:'stage'}).text(stage);
  $panels = $('<div>',{id:'panels'});
  $panelO = $('<canvas>',{width:w/2,height:h});
  $panelX = $('<canvas>',{width:w/2,height:h});
  $panelO[0].width = w/2;
  $panelX[0].width = w/2;
  $panelO[0].height = h;
  $panelX[0].height = h;
  $demo
    .append($panels);
  $panels
    .append($panelO)
    .append($panelX);
  var se = new Audio('/mp3/correct1.mp3');


  function goToURL(ox){
    var q = $('[name="q"]').val();
    var a = enc(ox, q);
    location.href = './?'+'q='+q+'&a='+a;
  }

  function checkAnswer(ox){
     $answer.addClass('answered').show();
    if(answer === ox){
      var se = new Audio('/mp3/correct1.mp3');
      se.play();
      $answer.text('正解！');
    } else {
      var se = new Audio('/mp3/miss.mp3');
      se.play();
      $answer.text('不正解…');
    }
  }


  const $answer = $('#answer').hide();

  let answer = '';
  const params = new URLSearchParams(window.location.search);
  let q = params.get('q');
  let a = params.get('a');
  console.log(q);
  console.log(a);
  $('[name="q"]').val(q);
  if(a){
    //問題文状態
    answer = dec(a,q);
    console.log(answer);
    if(q){
      $('#question').text(q);
      $('h1').hide();
      $('[name="q"]').hide();
      $('ol').hide();
    }
  }

  $panelO.on('click', function(e){
    if(q){
      $(this).addClass('selected');
      checkAnswer('o');
    } else {
      goToURL('o');
    }
    setTimeout(() => 
      e.target.style.pointerEvents = "none"
    , 99);
  });
  $panelX.on('click', function(e){
    if(q){
      $(this).addClass('selected');
      checkAnswer('x');
    } else {
      goToURL('x');
    }
    setTimeout(() => 
      e.target.style.pointerEvents = "none"
    , 99);
  });


  var ctx1 = $panelO[0].getContext('2d');
  ctx1.beginPath () ;
  ctx1.arc( cx, cy, cr, 0*Math.PI/180, 360*Math.PI/180, false ) ;
  ctx1.strokeStyle = 'rgb(240,30,30)';
  ctx1.lineWidth = cr/2;
  ctx1.stroke() ;

  var ctx2 = $panelX[0].getContext('2d');
  ctx2.beginPath();
  ctx2.lineWidth = cr/2;
  ctx2.strokeStyle = 'rgb(0,120,200)';
  ctx2.moveTo((cx-cr), (cy-cr));
  ctx2.lineTo((cx+cr), (cy+cr));
  ctx2.moveTo((cx+cr), (cy-cr));
  ctx2.lineTo((cx-cr), (cy+cr));
  ctx2.stroke();

  var questions = [];
  $btnPlus = $('<button>').text('+');
  $btnMinus = $('<button>').text('-');
  $demo
    .append($btnPlus);

  $btnPlus.on('click', function(){
    questions.push([]);
    setQuestion(questions.length-1);
  });
  $btnMinus.on('click', function(){
    questions.shift();
    $questionsWrap.find(div).eq(-1).remove();
  });

  function setQuestion(i){
    $div = $('<div>')
    $o = $('<input>',{type:'radio',name:'stage'+i, value:'o'});
    $x = $('<input>',{type:'radio',name:'stage'+i, value:'x'});
    $div
      .append($o)
      .append($x);
    $questionsWrap
      .append($div);
  }
  $questionsWrap = $('<div>')
  $demo
    .append($questionsWrap);
});

body{
  overflow:hidden;
  background-color:#ddd;
}
#demo{
  position:relative;
  top:0;
  left:0;
}
input{
  width:99%;
  padding:8px 0;
  font-size:24px;
}
#stage{
  text-align:center;
  font-size:64px;
  font-weight:bold;
}
#panels{
  display:flex;
}

#panels canvas{
  width:50%;
  cursor:pointer;
}
#panels canvas:hover{
  opacity:0.8;
}
canvas:hover{
  background-color:#aaa;
}
canvas.selected{
  background-color:#fff;
}

#answer.answered{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  font-size:160px;
  line-height:240px;
  text-align:center;
  background-color:rgba(0,0,0,0.1);
}

ページのソースを表示 : Ctrl+U , DevTools : F12

view-source:https://hi0a.com/demo/-js/js-quiz-ox/