jQueryクイズアプリ
今回は第１回で作成したクイズアプリをjQueryに書き換えて作っていきます。
・クイズアプリを作ってフロントエンドの基礎を学ぶ 第１回(全２回)
jQueryはJavaScriptのライブラリーです。
ライブラリーは、JavaScriptの複雑な処理をより簡単に使⽤できるようにします。
jQueryを使うには、オフィシャルサイトからライブラリーをダウンロードします。
・https://jquery.com/download/ にて、"Download the compressed, production jQuery 3.5.1"を右クリックして"jquery-3.5.1.min.js"を保存します。
・"jquery-3.5.1.min.js"をアプリ内のjsフォルダに置きます。
・HTML内で、 <script src="js/jquery-3.5.1.min.js"></script> を追記します。
jsファイル内でjQuery使うには、以下のようにライブラリーを先に読み込ませる必要があります。
HTMLの全てのタグが、上から下へタグ毎に実⾏されます。例えばライブラリーのタグを⼀番下に置けば、jsの実⾏時はライブラリーが存在しないままになってしまい、エラーが出ます。
<script src="js/jquery-3.5.1.min.js"></script>
<script src="js/data.js"></script>
<script src="js/app.js"></script>
jQuery構⽂
jQueryは、HTMLの要素を選択し、要素に対して何らかのアクションを実⾏することができます。
"$"はjQueryを定義するための記号です。
$("a").hide() : すべての <a> 要素を⾮表⽰にします。
最も使⽤されているjQueryセレクター
$("a"): 要素セレクター
$("#idName"): HTMLタグのid属性を使⽤して要素を⾒つけます
$(".className"): HTMLタグのclass属性を使⽤して要素を⾒つけます
IDの場合は"#"とID名、classの場合は"."とクラス名
⼀般的に使⽤されるjQueryイベント
click(): この関数は、ユーザーがHTML要素をクリックすると実⾏されます
$("a").click(function(){
alert("click")
$(this).hide();
});
dblclick(): この関数は、ユーザーがHTML要素をダブルクリックすると実⾏されます
$("a").dblclick(function(){
alert("double-clicks")
$(this).hide();
});
mouseleave(): マウスがHTML要素から離れると、関数が実⾏されます
$("a").mouseleave(function(){
alert("mouseleave");
});
hover(): 最初の関数は、マウスがHTML要素に⼊ったときに実⾏され、2番⽬の関数はマウスがHTML要素から離れたときに実⾏されます
$("a").hover(function(){
alert("In");
},
function(){
alert("Out");
});
on(): 選択した要素に1つ以上のイベントを付けることができます
$("a").on({
click: function(){
alert("click");
},
dblclick: function(){
alert("dblclick");
}
});
クイズアプリをjQueryに書き換える
1.jQueryライブラリーをjsフォルダーに配置し、HTMLにjQueryのタグを追加します。
<script src="js/jquery-3.5.1.min.js"></script>
2.ソースの中で、要素のセレクター、イベントなどをJavaScript構⽂からjQuery構⽂に書き換えます。
var content = $("#mainCon");
var question = $("#qst");
var choice = $("#chc");
var submit = $("#sub");
var turn = 0;
var score = 0;
var askingQuestion = true;
var setTimer = 6;
var timer = setInterval(function(){
$("#time").html("残り: " + setTimer + "秒");
setTimer--;
if (setTimer === 0){
clearInterval(timer);
$("#time").text("終了");
alert("タイムアップ！");
showResults();
}
}, 1000);
function createQst() {
var choices = quizData[turn].choices;
var choicesHtml = "";
for (var i = 0; i < choices.length; i++) {
choicesHtml += "<input type='radio' name='quiz" + turn + "' id='choice" + (i +
1) + "' value='" + choices[i] + "'>" + " <label for='choice" + (i + 1) + "'>" +
choices[i] + "</label><br>";
}
question.text("No." + (turn + 1) + " " + quizData[turn].question);
choice.html(choicesHtml);
if (turn === 0) {
submit.text("Submit");
}
}
function checking() {
if (askingQuestion) {
submit.text("Next");
askingQuestion = false;
var selectedAnsw;
var correctIndex;
var radios = $("[name='quiz"+turn+"']");
for (var i = 0; i < radios.length; i++) {
if (radios[i].checked) {
selectedAnsw = radios[i].value;
}
if (radios[i].value == quizData[turn].correct) {
correctIndex = i;}
}
var label = $("label")[correctIndex];
$(label).css("font-weight", "bold");
if (selectedAnsw == quizData[turn].correct) {
score++;
$(label).css('color', 'green');
} else {
$(label).css('color', 'red');
}
} else {
askingQuestion = true;
submit.text("Submit");
if (turn < quizData.length - 1) {
turn++;
createQst();
} else {
clearInterval(timer);
showResults();
}
}
}
function showResults() {
if (score != 0) {
content.html("<h2>お疲れ様でした！</h2>" +
"<h2>以下結果になります、</h2>" +
"<h2>" + quizData.length + "問中、"+ score + "問正解、" +
Math.round(score / quizData.length * 100) + "%<h2>");
}
else {
content.html("<h2>お疲れ様でした！</h2>" +
"<h2>以下結果になります、</h2>" +
"<h2 style='color:red'>全問不正解！<h2>");
}
}
$(document).ready(function(){
createQst();
});
submit.click(function(){
checking();
});
jQueryの書き換えは終了です。下記課題を自分で調べて機能を追加してみましょう！
課題
結果の画⾯でやり直しのボタンを追加
答え終わった時にタイマーを⽌める
問題をランダムに出す
↧