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

プログラミング
スポンサーリンク

ゆうき
ゆうき

こんにちは。ゆうきです。

スポンサーリンク

はじめに

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

プログラミングを始めたばかりなので大したものではありませんがこだわったポイントなどもあるのでみていただけたら嬉しいです。

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

おみくじアプリについて

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

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

動画にするとこんな感じです。

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

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

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

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

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

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

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

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

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

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

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

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

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

JavaScriptじゃなくてjQueryだったら簡単なのに、、(笑)

では完成した動画です。

使用言語

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

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

初めて聞くって方はプログラミング言語の解説と紹介もしてあるのでそちらをどうぞ。

コード

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();
  }
})
}

だいぶ長いですね。

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

その他の記事

プログラミングは実際に制作しながら勉強するのがお勧めです

今回制作してみて思ったことは圧倒的に学習効率がいいということ。

基礎文法のチェックをしながらアウトプットできるからです。

また実際に目に見えるアプリがあるので自信とモチベーションにつながります。

プログラミング初心者は基礎文法を身につけてからはできるだけ早くWebページでもアプリでもいいので動画をみながら作ってみるべきだと思います。

ドットインストールが終わった後でまだ身についていないなと思う方はUdemyをやってみるのがおすすめです。

料金はコースごとに買い切り制で身につけたい分野だけを重点的にやるのがおすすめです。

気になった方はこちらのリンクからどうぞ。

Udemy
ゆうき
ゆうき

最後まで読んでいただきありがとうございました。よかったらフォローしてね。

コメント

タイトルとURLをコピーしました