Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by Stephen Gillon
Stephen Gillon
11,996 Points

Combining multiple choice and drag and drop questions with "next" or "submit"

I'm creating a quiz game. I have my multiple choice and drag and drop potions working separately, just not sure of the steps to combine the two. My multiple choice uses an array to write the questions, not sure how to incorporate my drag and drop portion (which is made out of link draggables directly written on the html). If anyone has any suggestions it would be greatly appreciated. Thanks!

2 Answers

Steven Parker
Steven Parker
229,732 Points
Steven Parker
Steven Parker
229,732 Points

If you reserve a spot on the page for the score:

     <div class="questions">
        <h2>Results</h2>
        <h3 id="score"><h3>  <!-- a place to show the score -->
     </div>

Then, you can update the page when you get the total:

  $questions.hide();
  $questions.eq(currentQuestion).fadeIn();  // eq saves having to convert back to JQuery object
  $('#next').click(function() {
    if (currentQuestion == 0) { // special scoring for the drag-and-drop - count green answers
      answers.question1 = $("#routed,#routing").find("a").filter(function() {
        return $(this).css('background-color') == 'rgb(0, 128, 0)'; // internal version of "green"
      }).length;
    }
    $questions.eq(currentQuestion).fadeOut(function() {
      currentQuestion = currentQuestion + 1;
      $questions.eq(currentQuestion).fadeIn();
      if (currentQuestion == totalQuestions - 1) {  // last is one LESS than total
        $('#next').hide();                          // no more "next" button
        var result = sum_values();
        $("#score").text(result + " points");       // update score on page
      }
    });

:bulb: And you can still use the "DRY" replacement for dropUser that I gave you before.
Just change "lime" back to "green".

:warning: One last thing: the footer element should be inside the body, not after it.

Stephen Gillon
Stephen Gillon
11,996 Points

I did catch that error and I got it working to where it gets to the results page but not print a correct answer score. Steven Parker

Steven Parker
Steven Parker
229,732 Points
Steven Parker
Steven Parker
229,732 Points

Did you catch the error in sum_values where you had questions (plural) on one line but question (singular) on the next?

Steven Parker
Steven Parker
229,732 Points
Steven Parker
Steven Parker
229,732 Points

I assume you want to display the questions one at a time, right? Without seeing the code I can make some generic suggestions for possible techniques:

  • The questions could exist in the HTML and be turned on and off (JQuery .hide or element.style.display "none").
  • The questions could be generated in the JavaScript and placed into a container element on the page.
  • The questions could be loaded in via AJAX page updates.
Stephen Gillon
Stephen Gillon
11,996 Points

Thanks again Steven Parker ! Been a bit busy. Will post code after I try your suggestions of hide and js generation. I have no idea how to load via ajax.

Steven Parker
Steven Parker
229,732 Points
Steven Parker
Steven Parker
229,732 Points

If you're curious about it, there is an AJAX Basics course available.

Stephen Gillon
Stephen Gillon
11,996 Points

Hey there Steven Parker ! Got the divs to hide by doing jquery in the html as suggested. Not sure how I would have added the draggable question into the jquery to generate with multiple correct answer combination. I have my snapshot here ( https://w.trhou.se/127h69rbds ) for you to see my code. Now, I just have to figure out scoring methods to use in percentages. Let me know what you think! Thanks for your input!