Quizの使い方

Quizは、問題文を表示し、ボタンをクリックすることで答えを表示・非表示にできるインタラクティブなコンポーネントです。 学習内容の理解度確認や、暗記項目のチェックなどに活用できます。

基本的な使い方

Quizコンポーネントをインポートし、questionプロップに問題文を、children（タグの中身）に正解を渡します。

コード例（文字列の答え）

シンプルな文字列の答えを表示する場合の例です。

import Quiz from '../../../components/Quiz';

<Quiz client:visible question="ドメイン名とIPアドレスを変換するシステムは何でしょう？">
  DNS（Domain Name System）
</Quiz>

プレビュー

Q.

ドメイン名とIPアドレスを変換するシステムは何でしょう？

答えを見る

リッチテキストの答え

childrenには、文字列だけでなく、JSX要素（HTMLタグや他のコンポーネントを含むコンテンツ）を渡すことも可能です。 解説を含めたり、重要な部分を太字にしたりする場合に便利です。 childrenとして渡すため、以前のようにフラグメントで囲む必要がなく、自然に記述できます。

コード例

import Quiz from '../../../components/Quiz';

<Quiz client:visible question="TCPの接続確立手順を何と呼ぶでしょう？">
  正解は <strong>3ウェイハンドシェイク</strong> です。<br/>
  SYN → SYN/ACK → ACK の順で接続を確立します。
</Quiz>

プレビュー

Q.

TCPの接続確立手順を何と呼ぶでしょう？

答えを見る

他のコンポーネントとの組み合わせ

Quizの中に他のコンポーネントを含めることも可能です。

コード例

import Quiz from '../../../components/Quiz';

<Quiz client:visible question="ネットワーク層で動作し、エラー通知や情報照会を行うプロトコルは何でしょう？">
  <div>
    正解は ICMP です。<br/>
    Pingコマンドはこのプロトコルを使用しています。
  </div>
</Quiz>

プレビュー

Q.

ネットワーク層で動作し、エラー通知や情報照会を行うプロトコルは何でしょう？

答えを見る