Web Speech APIを使ってクイズゲームを作ってみた

Web Speech APIを使ってクイズゲームを作ってみた:

対象

• Bootcamp通い始めて3週間なので、初心者向けです
• JavaScriptでなにか作る練習をしている人で、WebSpeechAPI使ってみたいという方におすすめです

環境

Chrome バージョン: 70.0.3538.67（Official Build） （64 ビット）

概要

• クイズの解答と追加ができます
• 解答部分ではWebSpeechAPIを使って選択肢を音声で選択できるようにしました
• 一部エラーが起きたため、mainとsubという形でjsファイルをわけております
• 下記にコードをあげました
  
  
  • https://github.com/thatnaoki/quiz_speech

main.js

let questions = []; 
let num = 0; 
let correct = 0; 
let wrong = 0; 
 
// localStorageのクイズを取得してquestions配列に入れる関数 
const makeQuiz = function(i) { 
    let key = localStorage.key(i); 
    let value = localStorage.getItem(key); 
    let question = JSON.parse(value); 
    questions.push(question); 
    console.log(questions); 
}; 
 
// questions配列に、localStorageの問題を全部入れる 
window.onload = function() { 
    for(let i = 0; i < localStorage.length; i++) { 
        makeQuiz(i); 
    } 
    $('#quiz-wrapper').hide(); 
}; 
 
// 問題表示用の関数 
const showQuiz = function(i) { 
    $('#question').html(questions[i].quiz); 
    $('#choice1').html(questions[i].choice1); 
    $('#choice2').html(questions[i].choice2); 
    $('#choice3').html(questions[i].choice3); 
    $('#quiz-wrapper').show(); 
    $('#try').hide(); 
    $('#create').hide(); 
    $("input[name='choice']:checked").prop("checked", false); 
} 
 
// 最初の問題表示 
$('#try').on('click', function() { 
    showQuiz(0); 
}) 
 
// 回答と正解判定および次の問題へ 
$("#finalanswer").on("click", function() { 
    ; 
    let finalAnswer = $("input[name='choice']:checked").val(); 
    console.log(finalAnswer); 
    if (finalAnswer == questions[num].answer) { 
        correct++; 
        alert("Correct!"); 
    } else if (!finalAnswer) { 
        alert("You must choose the answer."); 
        return false; 
    } else { 
        wrong++; 
        alert("Wrong!"); 
    } 
    if(num < localStorage.length - 1) { 
        num++; 
        showQuiz(num); 
    } else { 
        alert('Correct: ' + correct + ' Wrong: ' + wrong); 
        location.reload(); 
    } 
}) 
 
// 音声認識関連 
let btn = document.querySelector('#speech_btn'); 
let speech = new webkitSpeechRecognition(); 
 
speech.lang = "ja"; 
 
btn.addEventListener('click', function() { 
    speech.start(); 
}); 
 
speech.addEventListener('result', function(e) { 
    // console.log(e); 
    var speech_text = e.results[0][0].transcript; 
    console.log(speech_text); 
    if (speech_text == questions[num].choice1) { 
        $("input[value='1'] ").prop("checked", true); 
    } else if (speech_text == questions[num].choice2) { 
        $("input[value='2'] ").prop("checked", true); 
    } else if (speech_text == questions[num].choice3) { 
        $("input[value='3'] ").prop("checked", true); 
    } else { 
        alert("I'm not sure about what you said. Please try again."); 
    } 
}); 

sub.js

let questions = []; 
let num = 0; 
let correct = 0; 
let wrong = 0; 
 
// キー作成用関数 
const makeKey = function() { 
    let keys = [0]; 
    for(let i = 0; i < localStorage.length; i++) { 
        keys.push(localStorage.key(i)); 
    } 
    let maxNum = Math.max.apply(null,keys); 
    return 1 + maxNum; 
} 
 
// クイズ追加イベント 
$('#create').on('click', function (){ 
    let key = makeKey(); 
    let quiz = $('#quiz').val(); 
    let choice1 = $('#choice1_text').val(); 
    let choice2 = $('#choice2_text').val(); 
    let choice3 = $('#choice3_text').val(); 
    let answer = $("input[type='radio']:checked").val();  
 
    if (quiz == "" || choice1 == "" || choice2 == "" || choice3 == "") { 
        alert("Please fill all blanks!") 
        return false; 
    } 
 
    if (!answer) { 
        alert("Please choose the answer for this question!") 
        return false; 
    } 
 
    const question = { 
        quiz: quiz, 
        choice1: choice1, 
        choice2: choice2, 
        choice3: choice3, 
        answer: answer 
    } 
 
    localStorage.setItem(key, JSON.stringify(question)); 
    console.log(question); 
    alert("Created!"); 
    // location.reload(); 
}) 

雑感

• bootstrapを使ってみたのですが、まだ慣れずレイアウトに苦戦しました（cssで書いた方が早かったかも、、）
• 間違いやもっとこうすべき等ご意見あればご教授いただけますと幸いです