hogwarts house quiz

Hogwarts-House-Quiz

顾名思义，我使用HTML，CSS和Vanilla Typescript构建的Web应用程序使用户有机会查看他们可能会分类的Hogwarts House。下面，我描述了它的工作原理。有关更多详细信息，请参阅我的代码和其中的评论。

• 随机图像显示为页面背景。我在一个数组中存储了几个图像URL，并通过它循环循环，在页面加载时选择一个随机的图像URL，并在显示新问题时。我在结果页面上设置了一个特定的背景。

• 加载页面后，向用户打招呼并提示用户单击按钮开始测验，无论是要播放较短（15个问题）还是更长的版本（30个问题）。

• 开始测验后，问候是隐藏的，第一个问题显示。对于每个问题，我都会从总问题中显示出一个问题，我将其存储为数组中的对象，因此它显示为：问题 /问题阵列的索引，该索引也是随机的，除了最后一个问题测验，向用户询问其房屋偏好。当用户播放较短的版本时，随机14个问题而不是有关其房屋偏好的问题，并将其添加到问题数组中。无论是播放短版本还是长版本，有关其偏好的问题都附加到问题数组中。

• 问题本身是在包含所有问题的数组中给定问题对象的属性，它显示在计数下。答案选项是随机排序的。

• 在每个问题的对象中，我还添加了一个“权重”属性，这是一个数字，表明该问题在确定用户房屋中的重要性。当用户选择一个选项时，此“权重”属性将添加到相应的房屋的点总数，该房屋存储在数组中。

• 转到下一个问题（当用户选择一个问题选项时，会立即发生该问题，从DOM清除该问题的信息，如果有一个顺序的问题，则该问题的信息填充了DOM；如果有毫无疑问，问题区域从DOM和结果区域显示。

• 在测验结束时，选择了最高点的房屋，并出现其相应的波峰和标题。为此，我添加了几个很酷的动画。

如果您想自己尝试一下，请转到这里：https：//whats-my-hogwarts-house.netlify.app/

我很高兴听到任何反馈，无论是使用此应用程序的经验还是在我的代码上。感谢您的阅读！