「网易官方」极客战记（codecombat）攻略-网页开发2-小测验-quizlet

(点击图片进入关卡)

创建一个问题问答，并用伪心理学方法对其进行分组！

简介

做你自己的性格测验！

我们给了你布局，并为你编写了开始的脚本。现在是你完成它的时候了！

默认代码

<!-- 创建一个测验来帮助你的朋友发现… -->

<!-- 你养什么类型的狗？ -->

 

<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>

概览

性格测验有助于弄清你的同学是什么样的人。

给他们一个自省的问题，让他们回答一系列心理问题来了解他们的灵魂。

你养什么类型的狗？是一个合适的标题，而 你最喜欢的食物是什么？是一个很好的初学者问题。 下面是一些例子的答案：

1. 桶
2. 牛排
3. 蔬菜
4. 牛粪

小测验 解法

鼓励学生在这一关创建一个富有创造性的项目，暂无标准解法

 

本攻略发于极客战记官方教学栏目，原文地址为：

https://codecombat.163.com/news/jikezhanji-xiaoceyan

极客战记——学编程，用玩的！