hogwarts house quiz

Hogwarts-House-Quiz

名前が示すように、HTML、CSS、およびVanilla TypeScriptを使用して構築したこのWebアプリは、ユーザーがどのHogwarts Houseに分類されるかを確認する機会をユーザーに提供します。以下では、それがどのように機能するかについて説明します。詳細については、私のコードと中のコメントをご覧ください。

• ランダムな画像は、ページの背景として表示されます。いくつかの画像URLをアレイに挿入して、ループしてループして保存し、ページが読み込まれたときと新しい質問が表示されたときにランダムなURLを選択しました。結果ページに特定の背景を設定します。

• ページを読み込むと、ユーザーが挨拶され、ボタンをクリックしてクイズを開始するように求められます。

• クイズを開始すると、挨拶が隠され、最初の質問が表示されます。質問ごとに、アレイの内部にオブジェクトとして保存する質問の集計を表示します。そのため、質問アレイの質問 /長さのインデックスは、最後の質問を除いてランダム化されます。クイズは、ユーザーに家の好みを求めます。ユーザーが短いバージョンを再生すると、家の好みに関するランダムな14の質問が選択され、質問配列に追加されます。短いバージョンであろうと長いバージョンであろうと、それらの好みについての質問は、質問配列に追加されます。

• 質問自体は、すべての質問を含む配列内の特定の質問のオブジェクトのプロパティであり、集計の下に表示されます。回答オプションはランダムに注文されます。

• 各質問のオブジェクト内には、「重量」プロパティも追加しました。これは、ユーザーの家を決定する際の質問の重要性を示す数字です。ユーザーがオプションを選択すると、この「重量」プロパティは、配列に保存されている対応する家のポイント合計に追加されます。

• 次の質問に移行すると（ユーザーが質問オプションを選択したときにすぐに発生します。その質問の情報はDOMからクリアされ、連続的な質問がある場合、その質問の情報はDOMに浸透します。質問はありません。質問領域はDOMと結果領域が表示されます。

• クイズの終わりには、最高点の合計を持つ家が選択され、対応するクレストと見出しが表示されます。このために、いくつかのクールなアニメーションを追加しました。

自分で試してみたい場合は、こちらにアクセスしてください：https：//whats-my-hogwarts-house.netlify.app/

このアプリを使用した経験であろうと、私のコードでも、フィードバックを聞いてうれしいです。読んでくれてありがとう！