JavaScript
Bootstrap
初心者
初心者向け
WebSpeechAPI

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


対象


  • Bootcamp通い始めて3週間なので、初心者向けです

  • JavaScriptでなにか作る練習をしている人で、WebSpeechAPI使ってみたいという方におすすめです


環境

Chrome バージョン: 70.0.3538.67(Official Build) (64 ビット)


概要


  • クイズの解答と追加ができます

  • 解答部分ではWebSpeechAPIを使って選択肢を音声で選択できるようにしました

  • 一部エラーが起きたため、mainとsubという形でjsファイルをわけております

  • 下記にコードをあげました




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で書いた方が早かったかも、、)

  • 間違いやもっとこうすべき等ご意見あればご教授いただけますと幸いです