ドットインストールでおみくじアプリと三択クイズアプリを作ってみました(見た目より簡単)

プログラミング

2022.04.18 2020.12.13

ゆうき

どーも、学生エンジニアのゆうき(@engieerblog_Yu)です。

1 はじめに
2 おみくじアプリについて
3 三択クイズアプリについて
4 使用言語
5 コード
6 その他の記事
7 【おわりに】プログラミングは実際に制作しながら勉強するのがお勧めです

はじめに
おみくじアプリについて
三択クイズアプリについて
使用言語
コード
その他の記事
【おわりに】プログラミングは実際に制作しながら勉強するのがお勧めです

はじめに

今回はドットインストールのJavaScriptコースで作れるアプリの中で、個人的に実用的だと思ったおみくじアプリと三択クイズアプリを作ってみました。

ドットインストールでこのようなアプリを作成することができるということを実感していただけたら嬉しいです。

今回はそちらについて紹介していきます。

おみくじアプリについて

見た目通りボタン方の簡単なおみくじアプリです。

ボタンの下部に影をつけることで立体感を演出しました。

ボタンを押すと影がなくなり、ボタンの上部を下げることでボタンが凹む様子を実現しました。

また大吉が出る確率は20%,吉が30%,大凶が10%と確率も調整しました。

三択クイズアプリについて

三択クイズアプリはおみくじアプリよりも難しかったですが作ってみました。

質問と三択が表示されて、そこから一つの選択肢を選ぶという一般的なクイズアプリです。

てこずったところは毎回選択肢の並ぶ順番を変えることと選択肢を一回しか選べなくすることです。

ここら辺はプログラミングが初めての人ならドットインストールの動画を見ながらじゃないとかなりきついかもです。

正解した場合は選択肢の背景と文字が緑色になり、正解の文字が表示されます。

また次へのボタンも青くなります。

不正解の場合は選択肢の背景と文字が赤くなります。そして不正解の文字が表示されてこちらも次へのボタンが青くなります。

どちらも一回しか選択できないようになっています。

問題は全部で3問あり正解数に応じてスコアが表示されます。

最後のスコアを上からスライドして表示するのがてこずりました。

使用言語

どちらも使用言語はHTML,CSS,JavaScriptです。

BootstrapやjQueryを使ったらもっと楽に作ることができると思います。

プログラミング言語の解説と紹介をしている記事もあわせてどうぞ。

【初心者向け】実用的なプログラミング言語15選とそれらの用途について簡単に解説

プログラミング初心者向けに簡単に実用的な言語をピックアップしました。それらの用途について簡単にまとめたので勉強の指針になると思います。

コード

HTML,CSSのコードは長くなるので省略させていただきます。

こちらがおみくじアプリのJavaScriptのコードです。

main.js

'use strict';

{
  const btn=document.getElementById('btn');
  btn.addEventListener('click',()=>{
    
    const results=['大吉','大吉','吉','吉','小吉','大凶','凶','半吉','吉'];
    
    const n=Math.floor(Math.random()*results.length);

    btn.textContent=results[n];

});
}

結構簡単に見えると思います。

汚いですがこちらが三択クイズのJavaScriptのコードです。

main.js

'use strict';

{
  const question=document.getElementById('question');
  const choises=document.getElementById('choices');
  const btn=document.getElementById('btn');
  const result=document.getElementById('result');
  const scoreLabel=document.querySelector('#result > p');
const quizSet=[
  {q:'日本で一番高い山は?',c:['阿蘇山','富士山','立山']},
  {q:'日本で一番長い川は?',c:['利根川','信濃川','九頭竜川']},
  {q:'日本で一番興行収入が多かった映画は?',c:['君の名は','千と千尋の神隠し','天気の子']}
];
let currentNum=0;
let isAnswered;
let score=0;

function shuffle(arr){
let i=arr.length-1;
for(let i=arr.length-1;i>0;i--){
const j=Math.floor(Math.random()*(i+1));
[arr[j],arr[i]]=[arr[i],arr[j]];}
  return arr;
}

function checkAnswer(li){
  if(isAnswered){
    return;
  }
  isAnswered=true;
  if(li.textContent===quizSet[currentNum].c[1]){
    li.classList.add('correct');
    score++;
  }
  else 
  li.classList.add('wrong');
  btn.classList.remove('disabled');
}

function setQuiz(){
  isAnswered=false;
question.textContent=quizSet[currentNum].q;
while(choices.firstChild){
  choices.removeChild(choices.firstChild);
}
const shuffleChoises=shuffle([...quizSet[currentNum].c]);
shuffleChoises.forEach(choice=>{
  const li =document.createElement('li');
  li.textContent=choice;
  li.addEventListener('click',()=>{
    checkAnswer(li);
  })
  choises.appendChild(li);
});
if(currentNum===quizSet.length-1){
  btn.textContent='結果を見る';

}
}
setQuiz();
btn.addEventListener('click',()=>{
  if(btn.classList.contains('disabled')){
    return;
  }
  btn.classList.add('disabled');
  if(currentNum===quizSet.length-1){
    scoreLabel.textContent = `Score: ${score} / ${quizSet.length}`;
    result.classList.remove('hidden');
  }else{
  currentNum++;
  setQuiz();
  }
})
}

だいぶ長いですね。

自力でやるのはかなり難しいのでドットインストールの動画を見ながらやるのがいいかと思います。