問題文を読み上げた後に選択肢を表示させるには（Jquery）
Q&A
Closed
解決したいこと
htmlで、四択問題クイズを作成しています。
問題文を読み上げた後に、選択肢をフェードインさせるような作りにしたいのですが、
以下のソースコードでは読み上げの途中で選択肢が表示されてしまいます。
素人が作成したソースコードで申し訳ないのですが
改善点を教えていただければと思います。
該当するソースコード
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<!-- jQuery・bootstrapライブラリ読み込み -->
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<link href="css/test.css" rel="stylesheet" />
<title>第１問</title>
<script src="js/typed.js"></script>
<audio src="XXXXXXXXXXX.mp3" id="correctMusic" ></audio>
</head>
<body>
<div class="textboard">
<div class="center">
<div class="quiz">
問題文
</div>
<div class="answerArea">
<a href="#" class="answer" id="correctFunc">１．</a>
<a href="#" class="answer">２．</a>
<a href="#" class="answer">３．</a>
<a href="#" class="answer">４．</a>
</div>
</div>
</div>
<!-- ############ javascript ############ -->
<script type="text/javascript">
// ページ読み込み路に実行する関数
$(document).ready( function(){
var mondai = '問題文'
$synthes = new SpeechSynthesisUtterance(mondai);
$.when(
// 問題文を読む
speechSynthesis.speak($synthes),
)
.done(function() {
// 選択肢を時間差でフェードインさせる
$('.answerArea').delay(6000).fadeIn("slow");
})
.fail(function() {
alert('error');
});
});
$('#correctFunc').on('click',function(){
// 正解音を鳴らす
$("#correctMusic").get(0).play();
});
</script>
</body>
</html>
0 likes
