document.title = 'クイズ回答入力フォーム';

document.oncontextmenu = function () {return false;}

$(function(){
  $demo = $('#demo');
  var data;
  var aryOrg = [];
  var ary = [];
  $form = $('<form>');
  $input = $('<input>',{name:'q',placeholder:'回答入力欄 or キーワード (半角全角不問)'});
  $target = $('<input>',{name:'target',disabled:'disabled'});
  $btn = $('<button>',{tyoe:'submit'}).text(document.title);
  $div = $('<div>',{id:'log'});
  $label = $('<label>');
  $time = $('<time>').text(0);
  $p = $('<p>').text('正解すると3秒後に次の問題へ飛ぶよ！');
  $p2 = $('<p>').text('もしくは特定キーワード入力で特別問題開始！');
  $p3 = $('<p>').text('設定でポップアップのブロックは解除してね');
  $demo.append($form);
  $form.append($input);
  $form.append($target);
  $form.append($btn);
  $form.append($div);
  $form.append($p);
  $form.append($p2);
  $form.append($p3);
  $input.focus();

  const seOK = new Audio('/mp3/ok.mp3');
  const seMiss = new Audio('/mp3/miss.mp3');

  var answersText = $('#answers').text();
  var answersData = answersText.split('\n');
  answersData.pop();
  answersAry = [];
  answersData.forEach(function(v){
    var data = v.split(' ');
    var hash = {
      word:data[0],
      url:data[1],
    };
    if(data.length>2){
      hash.flag = data[2];
    }
    answersAry.push(hash);
  });
  //console.log(answersAry);

  let key = getURLKEY();
  if(key){
    var data = key.split(' ');
    var hash = {
      word:data[0],
      url:data[1],
    };
    hash.word = decodeURI(hash.word);
    console.log(hash.word);
    answersAry = [];
    answersAry.push(hash);
  }

  $input.on('dblclick', function(){
    location.reload(true);
    return false;
  });
  $form.on('submit', function(){
    var v = $input.val();
    v = zenToHan(v);
    console.log(v);
    var isFind = false;
    answersAry.some(function(a){
      if(v===a.word && !a.flag){
        isFind = true;
        setOK(a);
        return true;
      }
      if(v===a.word && a.flag){
        isFind = true;
        setBad(a);
        return true;
      }
    });
    if(!isFind){
      setNG();
    }
    return false;
  });

  function setOK(a){
    seOK.play();
    if(a.url.match(/\?/)){
      $target.val('特別問題へ！');
    } else {
      $target.val('正解！');
    }
    setTimeout(function(){
      //window.open(a.url);
      location.href = a.url;
    },2999);
  }
  function setNG(){
    seMiss.play();
    $target.val('ハズレ！');
  }
  function setBad(a){
    seMiss.play();
    $target.val('おしおき！');
    setTimeout(function(){
      window.open(a.url);
    },2999);
  }

  function zenToHan(str){
    str = str.replace(/[Ａ-Ｚａ-ｚ０-９]/g, function(s) {
      return String.fromCharCode(s.charCodeAt(0) - 0xFEE0);
    });
    return str;
  }
});
  

#demo{
  display:grid;
  justify-items: center;
  align-items: center; 
}
footer,
#code,
pre{
  display:none;
}

input,button{
  width:100%;
  font-size:24px;
  padding:12px;
  box-sizing:border-box;
}
input.ok{
  background-color:#afa;
}
#log{
  display:flex;
}
#log label{
  padding:12px;
  font-size:24px;
  color:#aaa;
}
p{
  padding:12px;
  text-align:center;
}

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

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