Cara Membuat Kuis Dengan Jquery Html populer #1

Berikut ini adalah cara membuat Kuis Dengan Jquery Html yang simpel dan mudah dipelajari. Dapatkan informasi lainnya hanya di iwanrj.com

Cara Membuat Kuis Dengan Jquery Html populer #1

Kode ini membuat aplikasi kuis jQuery sederhana. Ini menghasilkan pertanyaan kuis dengan banyak jawaban dan menghitung skor total berdasarkan opsi yang dipilih.

Aplikasi kemudian mencocokkan skor dengan hasil yang telah ditentukan sebelumnya, menampilkan hasil akhir. Ini membantu membuat kuis interaktif untuk menilai preferensi pengguna.

Anda dapat mengintegrasikan aplikasi kuis ini ke blog, situs web, atau platform pendidikan Anda untuk melibatkan pengguna secara interaktif.

Membuat Kuis Dengan Jquery Html:

Sekarang kita buat file index.html dan diisi dengan kode html berikut ini:

<div id="quizzie"> <h1>What Type Of Thing Are You?</h1> <ul class="quiz-step step1 current"> <li class="question"> <div class="question-wrap"> <h2>Question #1: Are you more...</h2> </div> </li> <li class="quiz-answer low-value" data-quizIndex="2"> <div class="answer-wrap"> <p class="answer-text">This Thing</p> </div> </li> <li class="quiz-answer high-value" data-quizIndex="4"> <div class="answer-wrap"> <p class="answer-text">That Thing</p> </div> </li> </ul> <ul class="quiz-step step2"> <li class="question"> <div class="question-wrap"> <p>Question #2: Are you more...</p> </div> </li> <li class="quiz-answer low-value" data-quizIndex="2"> <div class="answer-wrap"> <p class="answer-text">First Thing</p> </div> </li> <li class="quiz-answer high-value" data-quizIndex="4"> <div class="answer-wrap"> <p class="answer-text">Second Thing</p> </div> </li> </ul> <ul class="quiz-step step3"> <li class="question"> <div class="question-wrap"> <p>Question #3: Are you more...</p> </div> </li> <li class="quiz-answer low-value" data-quizIndex="2"> <div class="answer-wrap"> <p class="answer-text">One Thing</p> </div> </li> <li class="quiz-answer high-value" data-quizIndex="4"> <div class="answer-wrap"> <p class="answer-text">Another Thing</p> </div> </li> </ul> <ul class="quiz-step step4"> <li class="question"> <div class="question-wrap"> <p>Question #4: Are you more...</p> </div> </li> <li class="quiz-answer low-value" data-quizIndex="2"> <div class="answer-wrap"> <p class="answer-text">Thing 1</p> </div> </li> <li class="quiz-answer high-value" data-quizIndex="4"> <div class="answer-wrap"> <p class="answer-text">Thing 2</p> </div> </li> </ul> <ul id="results"> <li class="results-inner"> <p>Your result is:</p> <h1></h1> <p class="desc"></p> </li> </ul> </div>

Langkah kedua, Kita akan membuat file css didalam kode html yang sudah kita buat tadi, letakkan pada posisi paling atas kode html anda yang sudah kita buat. berikut kode css nya:

@import url(https://#?/css?family=Satisfy|Pathway+Gothic+One); /* Defaults */ html, body, #quizzie { margin: 0; padding: 0; width: 100%; height: 100%; }* { box-sizing: border-box; }body { background: #677c8a; color: #fff; }h1 { font-family: 'Satisfy', 'cursive'; font-size: 2.5em; }h2, p { font-family: 'Pathway Gothic One', 'sans-serif'; font-size: 2em; }h1, h2, p { text-align: center; display: block; width: auto; margin: 1%; }#quizzie { padding: 5% 0; /* Individual Steps/Sections */ /* Content */ } #quizzie ul { list-style: none; display: block; width: auto; margin: 2% 2%; padding: 2%; overflow: auto; display: none; /* Step Questions and Answer Options */ } #quizzie ul.current { display: block; } #quizzie ul li { display: inline-block; float: left; width: 49%; margin-right: 2%; overflow: auto; text-align: center; } #quizzie ul li.quiz-answer { cursor: pointer; } #quizzie ul li.question, #quizzie ul li.results-inner { display: block; float: none; width: 100%; text-align: center; margin: 0; margin-bottom: 2%; } #quizzie ul li.results-inner { padding: 5% 2%; } #quizzie ul li.results-inner img { width: 250px; } #quizzie ul li:last-child { margin-right: 0; } #quizzie .question-wrap, #quizzie .answer-wrap { display: block; padding: 1%; margin: 1em 10%; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; } #quizzie .answer-wrap { background: Turquoise; -moz-transition: background-color 0.5s ease; -o-transition: background-color 0.5s ease; -webkit-transition: background-color 0.5s ease; transition: background-color 0.5s ease; } #quizzie .answer-wrap:hover { background: DarkTurquoise; }

Sekarang anda harus meletakkan kode Jquery dibawah ini didalam kode html anda. Letakkan diposisi paling atas file html anda.

<script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>

Tambahkan kode dibawah ini pada bagian bawah file html yang sudah anda buat tadi. berikut kode javascript nya:

// Quiz result options in a separate object for flexibility var resultOptions = [ { title: 'You Are This Thing', desc: '<p>Here, have an Archer</p><img src="https://i.imgur.com/tXTjD9k.jpg"/>'}, { title: 'You Are That Thing', desc: '<p>Here, have an Archer</p><img src="https://i.imgur.com/dipkE0v.jpg"/>'}, { title: 'You Are This Other Thing', desc: '<p>Here, have an Archer</p><img src="https://i.imgur.com/WXox0Yv.jpg"/>'}, { title: 'You Are This One Thing', desc: '<p>Here, have an Archer</p><img src="https://i.imgur.com/NH5cunw.png"/>'}, { title: 'You Are A Type Of Thing', desc: '<p>Here, have an Archer</p><img src="https://i.imgur.com/NH5cunw.png"/>'} ]; // global variables var quizSteps = $('#quizzie .quiz-step'), totalScore = 0;// for each step in the quiz, add the selected answer value to the total score // if an answer has already been selected, subtract the previous value and update total score with the new selected answer value // toggle a visual active state to show which option has been selected quizSteps.each(function () { var currentStep = $(this), ansOpts = currentStep.children('.quiz-answer'); // for each option per step, add a click listener // apply active class and calculate the total score ansOpts.each(function () { var eachOpt = $(this); eachOpt[0].addEventListener('click', check, false); function check() { var $this = $(this), value = $this.attr('data-quizIndex'), answerScore = parseInt(value); // check to see if an answer was previously selected if (currentStep.children('.active').length > 0) { var wasActive = currentStep.children('.active'), oldScoreValue = wasActive.attr('data-quizIndex'), oldScore = parseInt(oldScoreValue); // handle visual active state currentStep.children('.active').removeClass('active'); $this.addClass('active'); // handle the score calculation totalScore -= oldScoreValue; totalScore += answerScore; calcResults(totalScore); } else { // handle visual active state $this.addClass('active'); // handle score calculation totalScore += answerScore; calcResults(totalScore); // handle current step updateStep(currentStep); } } }); });// show current step/hide other steps function updateStep(currentStep) { if(currentStep.hasClass('current')){ currentStep.removeClass('current'); currentStep.next().addClass('current'); } }// display scoring results function calcResults(totalScore) { // only update the results div if all questions have been answered if (quizSteps.find('.active').length == quizSteps.length){ var resultsTitle = $('#results h1'), resultsDesc = $('#results .desc'); // calc lowest possible score var lowestScoreArray = $('#quizzie .low-value').map(function() { return $(this).attr('data-quizIndex'); }); var minScore = 0; for (var i = 0; i < lowestScoreArray.length; i++) { minScore += lowestScoreArray[i] << 0; } // calculate highest possible score var highestScoreArray = $('#quizzie .high-value').map(function() { return $(this).attr('data-quizIndex'); }); var maxScore = 0; for (var i = 0; i < highestScoreArray.length; i++) { maxScore += highestScoreArray[i] << 0; } // calc range, number of possible results, and intervals between results var range = maxScore - minScore, numResults = resultOptions.length, interval = range / (numResults - 1), increment = '', n = 0; //increment index // incrementally increase the possible score, starting at the minScore, until totalScore falls into range. then match that increment index (number of times it took to get totalScore into range) and return the corresponding index results from resultOptions object while (n < numResults) { increment = minScore + (interval * n); if (totalScore <= increment) { // populate results resultsTitle.replaceWith("<h1>" + resultOptions[n].title + "</h1>"); resultsDesc.replaceWith("<p class='desc'>" + resultOptions[n].desc + "</p>"); return; } else { n++; } } } }Sematkan komponen kuis ( <div id="quizzie">) di mana pun Anda ingin kuis tersebut muncul di laman web Anda. Pastikan warna latar belakang dan teks sesuai dengan tema situs Anda dengan menyesuaikan CSS.

Itu saja! semoga Anda berhasil membuat Aplikasi kuis sederhana di website Anda. Jika Anda memiliki pertanyaan atau saran, silakan berkomentar di bawah.

Download Script