ちょうど10分で超クールなクイズアプリを構築する

イントロ
何かを入力すると、ダイナミズムをもたらすウェブ開発において、入力での作業は最も重要な話題の一つですa それからthe font color may change またはb 言うa popup will be shown . この記事では、調査フォームやオンラインクイズで頻繁に使用されるHTMLラジオの入力方法や、ユーザーの好みを選択する方法について議論します.また、私はあなたのプロジェクトにグラデーションやアニメーションを追加する方法について議論します.だから私はどのように1つだけで、HTML、CSS、およびJavaScriptを使用して超クールなクイズアプリを構築することができます.

建物の構造
我々はクイズアプリを構築しているように我々は<h1> 質問と回答のための3つのラジオ入力のグループのために、我々は答えを提出するためにボタンを必要とします<div> と<div> に<main> .

<main id="quiz-app">
      <h1 id="quiz-title">JS QUIZ</h1>
      <div class="quiz-container" id="quiz">
        <h2 id="question"></h2>
        <li>
          <input type="radio" id="a" name="answer" class="answer" value="a" />
          <label for="a" id="a+"></label>
        </li>
        <li>
          <input type="radio" id="b" name="answer" class="answer" value="b" />
          <label for="b" id="b+"></label>
        </li>
        <li>
          <input type="radio" id="c" name="answer" class="answer" value="c" />
          <label for="c" id="c+"></label>
        </li>
        <button id="submit" value="Submit">Submit</button>
      </div>
    </main>

簡単にしてください.仮にmain 箱の中の箱div ボックスと我々のクイズの要素がある


スタイルの追加
私たちが現在構造をしているので、CSSを加えましょう

ボディ

body {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #eec0c6;
background-image: linear-gradient(315deg, #eec0c6 0%, #7ee8fa 74%);

  font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande',
    'Lucida Sans', Arial, sans-serif;
}

ここでは、最初の3行は、すべての私たちの要素が中心になることを確認します
そしてbackground-color 私たちに美しい色を与えるliner-gradient 私たちからの色の線形フローを与えるleft to right 回転315 度色A〜B


メイン
今すぐメインボックスを設計できます

main {
background-color: #6b0f1a;
background-image: linear-gradient(315deg, #6b0f1a 0%, #b91372 74%);

  border-radius: 5px;
  color: white;
}

クイズコンテナ

.quiz-container {
  list-style: none;
  box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.5);
  border-radius: 5px;
  padding: 3rem;
  background-color: white;
  color: blueviolet;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

これは、我々のクイズ容器にものすごい観察をします

アニメーションを追加することによってボタンをスタイル
ボタンのために、我々はGoannaのようないくつかのCSSクラスを使います:active & :hover また、私たちはtransform & translateY クリックアニメーションを追加するプロパティ

button#submit {
  padding: 0.5rem;
  border: none;
  border-radius: 3px;
  background-color: rebeccapurple;
  color: white;
  font-size: 1rem;
  margin: 1rem 0 0 40%;
  box-shadow: 0 5px rgb(195, 141, 246);
}

button#submit:hover {
  background-color: blueviolet;
}

button#submit:active {
  background-color: blueviolet;
  box-shadow: 0 5px rgb(188, 155, 219);
  transform: translateY(4px);
}

ここでアニメーションを理解する:active ボタンをクリックすると、ボタンが4軸のY軸に移動し、その後ボタンが自分の場所に戻ることを確認します:hover これは、我々は、その背景色を変更するボタンの上にカーソルをもたらす一方
そして、箱の影は私たちに


最後のタッチの追加
今、いくつかのパディングと余白を追加することによってクイズのタイトルと質問要素を修正しましょう

#question {
  margin: 0 0 2rem 0;
}

h1 {
  text-align: center;
  z-index: -1;
}

JavaScriptの追加とクイズの構築
私はこのセクションを3つのサブパートに分けました.すなわち、クイズデータを作成して、HTML入力をつかんで、更なるステップのために機能を定義します.

クイズデータの作成

/*quiz data */
const quizData = [
  {
    question: 'Who is the current CEO of Google ?',
    a: 'Sunder Pichai',
    b: 'Larry Page ',
    c: 'Jhon Brown',
    correct: 'a',
  },
  {
    question: 'Who is the current CEO of Amazon ?',
    a: 'Jeff Bezos',
    b: 'Warren Buffet ',
    c: 'Andy Jassy',
    correct: 'c',
  },
  {
    question: 'Who is the current CEO of Tesla ?',
    a: 'Jeffry Black',
    b: 'Elon Musk ',
    c: 'Jhon Brown',
    correct: 'b',
  },
  {
    question: 'Who is the current CEO of Microsoft ?',
    a: 'Satya Nadella ',
    b: 'Tom Klington',
    c: 'Jhon Brown',
    correct: 'a',
  },
  {
    question: 'Which of the company is owned by Mark Zkerburg ?',
    a: 'Neuralink ',
    b: 'Meta Platforms Inc ',
    c: 'Metaverse LLC ',
    correct: 'b',
  },
];

ここでは、クイズデータを格納するために配列オブジェクトを使用していますcorrect ユーザが指定した回答を検証するために必要なオプション

HTML要素の取得
動的性をもたらすことは、JavaScriptを通してHTML要素と通信することを意味します.そうすれば、最初に、我々はそれに動的に値を加えることができるように、HTMLクイズ要素をつかむ必要があります.私たちはあなたが100の質問を持っていると仮定し、私たちは、それからHTMLを使用してハードコードを追加した場合、我々は手で100クイズの要素を作成する必要がありますが、JavaScriptを使用してループを実行し、コードのいくつかの行だけでクイズ要素の100を作成する必要があると仮定してみましょう.

/*Grabing all the elements */
const question = document.getElementById('question');
const a = document.getElementById('a+');
const b = document.getElementById('b+');
const c = document.getElementById('c+');
const btn = document.getElementById('submit');
const all_answer = document.querySelectorAll('.answer');

### 3. クイズロジックの定義

let index = 0;
let score = 0;
//get the getSelected answer
function getSelected() {
  let ans = undefined;

  all_answer.forEach((el) => {
    if (el.checked) {
      ans = el.id;
    }
  });
  return ans;
}
//disselect all answer
function deselectans() {
  all_answer.forEach((el) => {
    el.checked = false;
  });
}
//load the quiz data
function getquiz() {
  deselectans();
  question.innerText = quizData[index].question;
  a.innerText = quizData[index].a;
  b.innerText = quizData[index].b;
  c.innerText = quizData[index].c;
}
//move forward the quiz
function startquiz() {
  btn.addEventListener('click', () => {
    let ans = getSelected();
    if (ans) {
      if (ans == quizData[index].correct) {
        score++;
      }
    }
    index++;
    if (index < quizData.length) {
      getquiz();
    } else {
      alert('score :' + score);
      location.reload();
    }
  });
}
getquiz();
startquiz();

それで、我々がここでしているすべては非常に単純です、最初に我々は2つの変数を定義しましたscore ユーザーが一致する必要がある答えを入力した場合のみ増加しますcorrect . The getselected() オプションを返しますid ユーザが選択したa オプションc オプションCの場合.The deselectans() ウィルすべての答えを選択します.重要なので、ユーザーが答えるときに言うa 第1の質問のために、それは答えますb この場合は次のためにgetselcted() 関数は、どのオプションIDを返すかを混乱させる.とgetquiz() が動的に質問を追加するために定義されます.
- 1 .
私の記事が知識ハブに若干の価値を加えることを願っています.あなたがそれを好めば、反応を投稿し、お友達や同僚とこの記事を共有してください.また、任意のクエリをしたり、直接TwitterやLinkedIn経由で私に連絡してコメントアウト.喜んでお手伝いします.次のハッピーコーディングのためにチューニング滞在!

接続