Quizet level doesn't finish

Level Help
1

I am on the quizet level and I am sure that I have everything.
here is my code

<!-- Create a quiz to help your friends find out... -->
<!-- ... what kind of person they *really* are. -->

<div id="content">
    <!-- Title your quiz anything you like! -->
    <!-- What kind of dog are you? -->
    <!-- What shade of fuschia speaks to your soul? -->
    <!-- What clique do you belong in? -->
    <h1>What [thing] are you?</h1>
    <div class="quizQuestion">
        <h2>1. Which [word] do you [like]?</h2>
        <div class="answers">
            <div data-value="A" class="answer">
                <div class="answerText">A: Sunshine</div>
            </div>
            <div data-value="B" class="answer">
                <div class="answerText">B: Gold Mining</div>
            </div>
            <div data-value="C" class="answer">
                <div class="answerText">C: Unicorn Dust</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 class="quizQuestion">
        <h2>2. Which smells the best?</h2>
        <div class="answers">
            <div data-value="A" class="answer">
                <div class="answerText">A: Lavander</div>
            </div>
            <!-- Add 3 more answers here: -->
             <div data-value="B" class="answer">
                <div class="answerText">B: Rose</div>
            </div>
             <div data-value="C" class="answer">
                <div class="answerText">C: Lemon Balm</div>
            </div>
             <div data-value="D" class="answer">
                <div class="answerText">
                    <img src="http://www.clipartkid.com/images/620/posted-by-edie-weinstein-msw-lsw-20TwYt-clipart.jpg" width="210">
                </div>
            </div>
        </div>
    </div>
    <div class="quizQuestion">
        <!-- Fill in the 3rd question here: -->
        <h2>3. What is your element?</h2>
        <div class="answers">
            <div data-value="A" class="answer">
                <div class="answerText">A: Fire</div>
            </div>
            <!-- Add 3 more answers here: -->
             <div data-value="B" class="answer">
                <div class="answerText">B: Earth</div>
            </div>
             <div data-value="C" class="answer">
                <div class="answerText">C: Air</div>
            </div>
             <div data-value="D" class="answer">
                <div class="answerText">
                    <img src="http://namasteclinic.com/wp-content/uploads/2016/03/water-wallpapers-12.jpg" width="216">
                </div>
            </div>
        </div>
    </div>
    <!-- Add a fourth, final question below: -->
      <div class="quizQuestion">
        <!-- Fill in the 3rd question here: -->
        <h2>4. What is your personality?</h2>
        <div class="answers">
            <div data-value="D" class="answer">
                <div class="answerText">A: Architect
                <img src="https://www.16personalities.com/images/types/intj.png" width="180">
                </div>
            </div>
            <!-- Add 3 more answers here: -->
             <div data-value="B" class="answer">
                <div class="answerText">B: LOgician
                    <img src="https://www.16personalities.com/images/types/intp.png" width="140">

                </div>
            </div>
             <div data-value="C" class="answer">
                <div class="answerText">C: Commander
                    <img src="https://www.16personalities.com/images/types/entj.png" width="140">
                </div>
            </div>
             <div data-value="A" class="answer">
                <div class="answerText">
                    D:DEBAter
                    <img src="https://www.16personalities.com/images/types/entp.png" width="130">
                </div>
            </div>
        </div>
    </div>
    <div class="result" id="a-personality">
        <h2>[Personality Type A]</h2>
        <img src="/file/db/thang.type/5744e3683af6bf590cd27371/portrait.png" width="200px">
        <p>
            You are wild and happy!
        </p>
    </div>
    <div class="result" id="b-personality">
        <h2>[Personality Type B]</h2>
        <!-- Fill out the info for personality type B: -->
        <img src="/file/db/thang.type/5744e3683af6bf590cd27371/portrait.png" width="200px">
        <p>
        You like to think logicaly and love science.
        </p>
    </div>
    <!-- Add three more personality types for C/D: -->
    <div class="result" id="c-personality">
        <h2>[Personality Type C]</h2>
        <!-- Fill out the info for personality type B: -->
        <img src="/file/db/thang.type/5744e3683af6bf590cd27371/portrait.png" width="200px">
        <p>
        You want to know what is going on and will contral the sictuation if needed.
        </p>
    </div>
    <div class="result" id="d-personality">
        <h2>[Personality Type D]</h2>
        <!-- Fill out the info for personality type B: -->
        <p>
        <img src="/file/db/thang.type/5744e3683af6bf590cd27371/portrait.png" width="200px">
        You are a planer.
        </p>
    </div>
    <div class="result" id="no-personality">
        <h2>[No Personality]!</h2>
        <img src="/file/db/thang.type/52e95a5022efc8e709001743/portrait.png" width="200px">
        <p>
            You have no personality! Womp, womp.
        </p>
    </div>
    <div id="footer">
        <button class="btn btn-primary btn-block btn-lg" id="submitButton">Submit</button>
        <button class="btn btn-primary btn-block btn-lg" id="retryButton">Retry</button>
    </div>
</div>
<style>
    body {
        background-color:rgb(63,63,63);
    }
    .answer {
        cursor:pointer;
        text-align:center;
        width:250px;
        height:250px;
        margin:8px;
        color:white;
        background-color:rgb(0,174,174);
        padding:16px;
        border: 1px solid black;
    }
    .selected {
        background-color:rgb(100, 146, 255);
    }
    #header {
        text-align:center;
        background-color:white;
    }
    #footer {
        text-align:center;
    }
    .answerText {
        font-size:2em;
    }
    h2 {
        padding-top:1em;
    }
    h1 {
        font-size:4em;
    }
    #content {
        background-color:white;
        width: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");
        // Add the "selected" class to answerDiv:
        answerDiv.siblings().addClass("selected")
        // Remove the "muted" class from answerDiv:
        answerDiv.siblings().removeClass("muted")
    }
    answers.on("click", highlightSelected);
    function submitAnswers() {
        var aCount = $(".selected[data-value='A']").length;
        var bCount = $(".selected[data-value='B']").length;
        // Create 2 more variables for C/D counts:
        var cCount = $(".selected[data-value='C']").length;
        var dCount = $(".selected[data-value='D']").length;
        if (aCount > 1) {
            $("#a-personality").show();
        }
        else if (bCount > 1) {
            // Show the element with id b-personality:
            $("#b-personality").show();
        }
        // Add more if-statements to cover C/D answers:
        else if (cCount > 1) {
            $("#c-personality").show();
        }
        else if  (dCount > 1) {
            $("#d-personality").show();
        }
        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>

This is the website link

I don’t know what is happening could you help please.

1 Like
2

Look at the highlightSelected function again.
Are you sure that you are deselecting all of the other tags and only selecting the tag you want?

Also if you look at the tags make sure that your personality types do not nest the <img> tag inside the <p> tag.

3

Hey, was this issue resolved? Because I have the same problem with my code. If it was fixed would you mind telling me how?

4

Hi @Redpanda78, please post your code and I’ll tell you what’s wrong with it.
Danny

6

I’m pretty sure I posted my code wrong the first time, hopefully this is better. Sorry about that. This is my current code @Deadpool198 . Any help is greatly appreciated!

<!-- Create a quiz to help your friends find out... -->
<!-- What kind of dog are you? -->

<div id="content">
    <!-- Title your quiz anything you like! -->
    <!-- What kind of dog are you? -->
    <!-- What shade of fuschia speaks to your soul? -->
    <!-- What clique do you belong in? -->
    <h1>Personality test</h1>
    <div class="quizQuestion">
        <h2>1. Which words speak to you?</h2>
        <div class="answers">
            <div data-value="A" class="answer">
                <div class="answerText">A: don't worry, be happy</div>
            </div>
            <div data-value="B" class="answer">
                <div class="answerText">B: DO or do not, there is no try</div>
            </div>
            <div data-value="C" class="answer">
                <div class="answerText">C: yolo</div>
            </div>
            <div data-value="D" class="answer">
                <div class="answerText">D: Existential Crisis</div>
            </div>
        </div>
    </div>
    <div class="quizQuestion">
        <h2>2. Where do you want to live?</h2>
        <div class="answers">
            <div data-value="A" class="answer">
                <div class="answerText">A: Wherever the wind takes me</div>
            </div>
            <div data-value="B" class="answer">
                <div class="answerText">B: my house</div>
            </div>
            <div data-value="C" class="answer">
                <div class="answerText">C: Earth</div>
            </div>
            <div data-value="D" class="answer">
                    <div class="answerText">D: Australia</div>
            </div>
        </div>
    </div>
    <div class="quizQuestion">
        <h2>3. What meme?</h2>
        <div class="answers">
            <div data-value="A" class="answer">
                <div class="answerText">A: Fre sha voc a do</div>
            </div>
            <div data-value="B" class="answer">
                <div class="answerText">B: Look at all those chickens</div>
            </div>
            <div data-value="C" class="answer">
                <div class="answerText">C: I thought you were American</div>
            </div>
            <div data-value="D" class="answer">
                    <div class="answerText">D: Ain't nobody got time for that</div>
            </div>
        </div>
    </div>
        <div class="quizQuestion">
        <h2>4. Why is school?</h2>
        <div class="answers">
            <div data-value="A" class="answer">
                <div class="answerText">A: learn</div>
            </div>
            <div data-value="B" class="answer">
                <div class="answerText">B: study</div>
            </div>
            <div data-value="C" class="answer">
                <div class="answerText">C: suffer</div>
            </div>
            <div data-value="D" class="answer">
                    <div class="answerText">D: hate</div>
            </div>
        </div>
    </div>
    
    <div class="result" id="a-personality">
        <h2>[Personality Type A]</h2>
        <img src="https://codecombat.com/file/db/thang.type/5432f9d18364d30000d1f943/portrait.png"/>
        <p>
            Congratulations! You are a happy and satisfied person. You can look at the world and still have a positive outlook on life! HOW DO YOU DO IT!?
        </p>
    </div>
    <div class="result" id="b-personality">
        <h2>[Personality Type B]</h2>
        <!-- Fill out the info for personality type B: -->
        <img src="https://codecombat.com/file/db/thang.type/529f9026dacd325127000005/portrait.png"/>
        <p>
             If you were a spice you would be flour. You are the wet blanket of your group (if you even have a group). Stop working so much and have some fun every once in a while!
        </p>
    </div>
    <!-- Add two more personality types for C/D: -->
    <div class="result" id="c-personality">
        <h2>[Personality Type C]</h2>
        <img src="https://codecombat.com/file/db/thang.type/54eb4d5949fa2d5c905ddf06/portrait.png"/>
        <p>
            You live for two reasons:
            1. You were born
            2. You haven't died yet
        </p>
    </div>
        <div class="result" id="d-personality">
        <h2>[Personality Type D]</h2>
        <img src="https://codecombat.com/file/db/thang.type/52e9adf7427172ae56002172/portrait.png"/>
        <p>
            You are dead inside. It's hard not to be in such a nihilistic generation. Don't worry, things will turn out okay. *pat* *pat*
        </p>
    </div>
    <div class="result" id="no-personality">
        <h2>[No Personality]!</h2>
        <img src="/file/db/thang.type/52e95a5022efc8e709001743/portrait.png" width="200px">
        <p>
            You have no personality! Womp, womp.
        </p>
    </div>
    <div id="footer">
        <button class="btn btn-primary btn-block btn-lg" id="submitButton">Submit</button>
        <button class="btn btn-primary btn-block btn-lg" id="retryButton">Retry</button>
    </div>
</div>
<style>
    body {
        background-color:rgb(63,63,63);
    }
    .answer {
        cursor:pointer;
        text-align:center;
        width:250px;
        height:250px;
        margin:8px;
        color:white;
        background-color:rgb(0,174,174);
        padding:16px;
        border: 1px solid black;
    }
    .selected {
        background-color:rgb(100, 146, 255);
    }
    #header {
        text-align:center;
        background-color:white;
    }
    #footer {
        text-align:center;
    }
    .answerText {
        font-size:2em;
    }
    h2 {
        padding-top:1em;
    }
    h1 {
        font-size:4em;
    }
    #content {
        background-color:white;
        width: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");
        // Add the "selected" class to answerDiv:
        answerDiv.siblings().addClass("selected");
        // Remove the "muted" class from answerDiv:
        answerDiv.siblings().removeClass("muted");
    }
    answers.on("click", highlightSelected);
    function submitAnswers() {
        var aCount = $(".selected[data-value='A']").length;
        var bCount = $(".selected[data-value='B']").length;
        // Create 2 more variables for C/D counts:
        var cCount = $(".selected[data-value='C']").length;
        var dCount = $(".selected[data-value='D']").length;

        if (aCount > 1) {
            $("#a-personality").show();
        }
        else if (bCount > 1) {
            // Show the element with id b-personality:
            $("#b-personality").show();
        }
        // Add more if-statements to cover C/D answers:
        else if (cCount > 1) {
            $("#c-personality").show();
        }
        else if (dCount > 1) {
            $("#d-personality").show();
        }
        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>
7

I moved this line back, but it worked when I put it back… Have you run it yet? Have you tried reloading it and re-pasting your code? It works for me.
Danny

8

@Deadpool198 Yes, I just tried all of that. It runs, the quiz part works, and the level says that I have successfully completed all of the goals. But I only get back personality type A, despite not putting a single A answer. The only time the personality comes back different is when I put in A as the answers and the personality type comes back as B.

9

Above, someone said to check the highlightSelected function. I don’t see a problem with FlowerChi’s code there and their code looks like mine. Do you think that’s where the problem is?

10

I’m still having trouble with this. Anyone able to help? :pleading_face:

11

I may have missed it, but what is the problem? With your code and no changes, I got this:

image
image737×481 43.8 KB

12

What answers did you input @dedreous? I only get personality B if at least three answers of A have been selected. My problem is that the answers selected don’t correspond with the personality given. Is this how it is supposed to work?

13

I took it as it was meant to do that. With my code, I get the ‘you have no’ response every time. I passed the level, so moved on.

14

Oh, okay. Thanks for the clarification! I was hung up on that for a while.