[text] Quizlet

Viewer

  1. <div id="content">
  2.     <!-- Title your quiz anything you like! -->
  3.     <!-- What kind of dog are you? -->
  4.     <!-- What shade of fuschia speaks to your soul? -->
  5.     <!-- What clique do you belong in? -->
  6.     <h1>what are you like</h1>
  7.     <div class="quizQuestion">
  8.         <h2>1. Your friends describe you as</h2>
  9.         <div class="answers">
  10.             <div data-value="A" class="answer">
  11.                 <div class="answerText">A: Smart</div>
  12.             </div>
  13.             <div data-value="B" class="answer">
  14.                 <div class="answerText">B: secretive</div>
  15.             </div>
  16.             <div data-value="C" class="answer">
  17.                 <div class="answerText">C: brave</div>
  18.             </div>
  19.             <div data-value="D" class="answer">
  20.                 <div class="answerText"> D: good - hearted</div>
  21.                 </div>
  22.             </div>
  23.         </div>
  24.     </div>
  25.     <div class="quizQuestion">
  26.         <h2>2. your favorite thing to do in spare time is </h2>
  27.         <div class="answers">
  28.             <div data-value="A" class="answer">
  29.                 <div class="answerText">A: nothing</div>
  30.             </div>
  31.             <!-- Add 3 more answers here: -->
  32.         <div class="answers">
  33.             <div data-value="B" class="answer">
  34.                 <div class="answerText">B: water </div>
  35.            </div>
  36.         <div class="answers">
  37.             <div data-value="C" class="answer">
  38.                 <div class="answerText">c: I play competitivel</div>
  39.         </div>
  40.         <div class="answers">
  41.             <div data-value="D" class="answer">
  42.                 <div class="answerText">d: I touch grass</div>
  43.             </div>
  44.         </div>
  45.     </div>
  46.         <div class="quizQuestion">
  47.         <!-- Fill in the 3rd question here: -->
  48.         <h2>3. if you could take an animal to school, you will take an</h2>
  49.             <div class="answers">
  50.                 <div data-value="A" class="answer">
  51.                     <div class="answerText">a: fish</div>
  52.             </div>
  53.             <div class="answers">
  54.                 <div data-value="B" class="answer">
  55.                     <div class="answerText">b: human</div>
  56.             </div>
  57.             <div class="answers">
  58.                 <div data-value="C" class="answer">
  59.                     <div class="answerText">c: i wouldn't take any</div>
  60.             </div>
  61.             <div class="answers">
  62.                 <div data-value="D" class="answer">
  63.                     <div class="answerText">d: parrot </div>
  64.                   </div>
  65.             </div>
  66.         </div>
  67.     <!-- Add a fourth, final question below: -->
  68.     <div class="quizQuestion">
  69.         <h2>4. in your free time,you</h2>
  70.             <div class="answers">
  71.                 <div data-value="A" class="answer">
  72.                     <div class="answerText">a: read</div>
  73.             </div>
  74.             <div class="answers">
  75.                 <div data-value="B" class="answer">
  76.                     <div class="answerText">b: play games</div>
  77.             </div>
  78.             <div class="answers">
  79.                 <div data-value="C" class="answer">
  80.                     <div class="answerText">c: watch movies</div>
  81.             </div>
  82.             <div class="answers">
  83.                 <div data-value="D" class="answer">
  84.                     <div class="answerText">d: meet friends</div>
  85.             </div>
  86.         </div>
  87.     </div>
  88.     <div class="result" id="a-personality">
  89.         <h2>you're a loser</h2>
  90.         <img src="https://codecombat.com/file/db/thang.type/52a00d55cf1818f2be00000b/portrait.png">
  91.         <p>
  92.             you're smart and awsome!
  93.         </p>
  94.     </div>
  95.     <div class="result" id="b-personality">
  96.         <h2>you're cringe</h2>
  97.         <!-- Fill out the info for personality type B: -->
  98.         <img src="https://codecombat.com/file/db/thang.type/5536f88c428ddac5686fd00c/portrait.png">
  99.         <p>
  100.             you're annoying!
  101.         </p>
  102.     </div>
  103.     <!-- Add two more personality types for C/D: -->
  104.     <div class="result" id="c-personality">
  105.         <h2>you're annoying!</h2>
  106.         <!-- Fill out the info for personality type B: -->
  107.         <img src="https://codecombat.com/file/db/thang.type/57586f0a22179b2800efda37/portrait.png">
  108.         <p>
  109.             you should be banned 
  110.         </p>
  111.     </div>
  112.     <div class="result" id="d-personality">
  113.         <h2>you're boring!</h2>
  114.         <!-- Fill out the info for personality type B: -->
  115.         <img src="https://codecombat.com/file/db/thang.type/577d5d4dab818b210046b3bf/portrait.png">
  116.         <p>
  117.             you're nice to others and that's important!
  118.         </p>
  119.     </div>
  120.     <div class="result" id="no-personality">
  121.         <h2>No Personality!</h2>
  122.         <img src="/file/db/thang.type/52e95a5022efc8e709001743/portrait.png" width="200px">
  123.         <p>
  124.             You have no personality! Womp, womp.
  125.         </p>
  126.     </div>
  127.     <div id="footer">
  128.         <button class="btn btn-primary btn-block btn-lg" id="submitButton">Submit</button>
  129.         <button class="btn btn-primary btn-block btn-lg" id="retryButton">Retry</button>
  130.     </div>
  131. </div>
  132. <style>
  133.     body {
  134.         background-color:rgb(63,63,63);
  135.     }
  136.     .answer {
  137.         cursor:pointer;
  138.         text-align:center;
  139.         width:250px;
  140.         height:250px;
  141.         margin:8px;
  142.         color:white;
  143.         background-color:rgb(0,174,174);
  144.         padding:16px;
  145.         border: 1px solid black;
  146.     }
  147.     .selected {
  148.         background-color:rgb(100, 146, 255);
  149.     }
  150.     #header {
  151.         text-align:center;
  152.         background-color:white;
  153.     }
  154.     #footer {
  155.         text-align:center;
  156.     }
  157.     .answerText {
  158.         font-size:2em;
  159.     }
  160.     h2 {
  161.         padding-top:1em;
  162.     }
  163.     h1 {
  164.         font-size:4em;
  165.     }
  166.     #content {
  167.         background-color:white;
  168.         width:566px;
  169.         padding:16px;
  170.         text-align:center;
  171.         font-family:sans-serif;
  172.         font-weight:bold;
  173.         text-transform:uppercase;
  174.         border: 1px solid black;
  175.     }
  176.     .muted {
  177.         opacity:0.25;
  178.     }
  179.     .result {
  180.         display:none;
  181.     }
  182.     #retryButton {
  183.         display: none;
  184.     }
  185. </style>
  186. <script>
  187.     var answers = $(".answer");
  188.     var submitButton = $("#submitButton");
  189.     var retryButton = $("#retryButton");
  190.     var quizQuestions = $(".quizQuestion");
  191.     var results = $(".result");
  192.     function highlightSelected() {
  193.         var answerDiv = $(this);
  194.         answerDiv.siblings().addClass("muted");
  195.         answerDiv.siblings().removeClass("selected");
  196.         // Add the "selected" class to answerDiv:
  197.         answerDiv.addClass("selected")
  198.         // Remove the "muted" class from answerDiv:
  199.         answerDiv.removeClass("muted")
  200.     }
  201.     answers.on("click", highlightSelected);
  202.     function submitAnswers() {
  203.         var aCount = $(".selected[data-value='A']").length;
  204.         var bCount = $(".selected[data-value='B']").length;
  205.         // Create 2 more variables for C/D counts:
  206.         var cCount = $(".selected[data-value='C']").length;
  207.         var dCount = $(".selected[data-value='D']").length;
  208.         if (aCount > 1) {
  209.             $("#a-personality").show();
  210.         }
  211.         else if (bCount > 1) {
  212.             // Show the element with id b-personality:
  213.              $("#b-personality").show();
  214.         }
  215.         // Add more if-statements to cover C/D answers:
  216.         else if (cCount > 1) {
  217.             // Show the element with id b-personality:
  218.              $("#c-personality").show();
  219.         }
  220.         else if (dCount > 1) {
  221.             // Show the element with id b-personality:
  222.              $("#d-personality").show();
  223.         }
  224.         else {
  225.             $("#no-personality").show();
  226.         }
  227.         quizQuestions.hide();
  228.         retryButton.show();
  229.         submitButton.hide();
  230.     }
  231.     submitButton.on("click", submitAnswers);
  232.     function resetPage() {
  233.         quizQuestions.show();
  234.         answers.removeClass("muted");
  235.         answers.removeClass("selected");
  236.         submitButton.show();
  237.         retryButton.hide();
  238.         results.hide();
  239.     }
  240.     retryButton.on("click", resetPage);
  241. </script>
  242.  

Editor

You can edit this paste and save as new:


File Description
  • Quizlet
  • Paste Code
  • 26 Jan-2022
  • 8.11 Kb
You can Share it: