(点击图片进入关卡)
创建一个问题问答，并用伪心理学方法对其进行分组！
简介
做你自己的性格测验！
我们给了你布局，并为你编写了开始的脚本。现在是你完成它的时候了！
默认代码
<!-- 创建一个测验来帮助你的朋友发现… -->
<!-- 你养什么类型的狗？ -->
<div id="content">
<!-- 设置任何你喜欢的测验标题！ -->
<!-- 你养什么类型的狗？ -->
<!-- 你曾有过什么样的心理阴影？ -->
<!-- 你属于哪个集团？ -->
<h1>你是什么东西？</h1>
<div id="quizQuestion">
<h2>1.你喜欢哪一个词？</h2>
<div id="answers">
<div data-value="A" class="answer">
<div class="answerText">A:阳光</div>
</div>
<div data-value="B" class="answer">
<div class="answerText">B:采掘黄金</div>
</div>
<div data-value="C" class="answer">
<div class="answerText">C:独角兽角粉末</div>
</div>
<div data-value="D" class="answer">
<div class="answerText">
<img
src="/file/db/thang.type/5432f9d18364d30000d1f943/portrait.png"/>
</div>
</div>
</div>
</div>
<div id="quizQuestion">
<h2>2.哪个地方闻起来最好？</h2>
<div id="answers">
<div data-value="A" class="answer">
<div class="answerText">A:有机物</div>
</div>
<!-- 在这里增加3个答案： -->
</div>
</div>
<div id="quizQuestion">
<!-- 在这里填写第三个问题： -->
</div>
<!-- 在下面添加第四个最后的问题： -->
<div class="result" id="a-personality">
<h2>[个性类型A ]</h2>
<img src="/file/db/thang.type/5744e3683af6bf590cd27371/portrait.png"
width="200px">
<p>
[他们有什么样的个性？]
</p>
</div>
<div class="result" id="b-personality">
<h2>[个性类型B ]</h2>
<!-- 填写个性类型B的信息： -->
</div>
<!-- 为C/D增加两种个性类型： -->
<div class="result" id="no-personality">
<h2>[没有个性]！</h2>
<img src="/file/db/thang.type/52e95a5022efc8e709001743/portrait.png"
width="200px">
<p>
你没有个性！
</p>
</div>
<divid="footer">
<button class="btn btn-primary btn-block btn-lg" id="submitButton">提交</button>
<button class="btn btn-primary btn-block btn-lg" id="retryButton">重试</button>
</div>
</div>
<style>
body {
}
.answer {
cursor:pointer;
text-align:center;
250px;
height:250px;
margin:8px;
color:white;
padding:16px;
border: 1px solid black;
}
.selected {
}
#header {
text-align:center;
}
#footer {
text-align:center;
}
.answerText {
font-size:2em;
}
h2 {
padding-top:1em;
}
h1 {
font-size:4em;
}
#content {
566px;
padding:16px;
text-align:center;
font-family:sans-serif;
font-weight:bold;
text-transform:uppercase;
border: 1px solid black;
}
.muted {
opacity:0.25;
}
.result {
display:none;
}
#retryButton {
display: none;
}
</style>
<script>
var answers = $(".answer");
var submitButton = $("#submitButton");
var retryButton = $("#retryButton");
var quizQuestions = $(".quizQuestion");
var results = $(".result");
function highlightSelected() {
var answerDiv = $(this);
answerDiv.siblings().addClass("muted");
answerDiv.siblings().removeClass("selected");
// 将"selected"类添加到answerDiv：
// 从answerDiv中删除"muted"类
}
answers.on("click", highlightSelected);
function submitAnswers() {
var aCount = $(".selected[data-value='A']").length;
var bCount = $(".selected[data-value='B']").length;
// 为C/D创建2个变量：
if (aCount > 1) {
$("#a-personality").show();
}
else if (bCount > 1) {
// 显示具有 id B个性的元素：
}
// 添加更多的if语句来覆盖C/D答案：
else {
$("#no-personality").show();
}
quizQuestions.hide();
retryButton.show();
submitButton.hide();
}
submitButton.on("click", submitAnswers);
function resetPage() {
quizQuestions.show();
answers.removeClass("muted");
answers.removeClass("selected");
submitButton.show();
retryButton.hide();
results.hide();
}
retryButton.on("click", resetPage);
</script>
概览
性格测验有助于弄清你的同学是什么样的人。
给他们一个自省的问题，让他们回答一系列心理问题来了解他们的灵魂。
你养什么类型的狗？是一个合适的标题，而 你最喜欢的食物是什么？是一个很好的初学者问题。 下面是一些例子的答案：
- 桶
- 牛排
- 蔬菜
- 牛粪
小测验 解法
鼓励学生在这一关创建一个富有创造性的项目，暂无标准解法