Файловый менеджер - Редактировать - /home/hrpsychology/public_html/nutritiontoday.gr/tables/tfquizmind.html
Назад
<!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <style> body { margin: 0; padding: 20px; font-family: calibri; } .quiz { padding: 0 30px 20px 30px; max-width: 960px; margin: 0 auto; } .quiz ul { list-style: none; padding: 0; margin: 0; } .quiz-question { font-weight: bold; display: block; padding: 30px 0 10px 0; margin: 0; } .quiz-answer { margin: 0; padding: 10px; background: #f7f7f7; margin-bottom: 5px; cursor: pointer; } .quiz-answer:hover { background: #eee; } .quiz-answer:before { content: ""; display: inline-block; width: 15px; height: 15px; border: 1px solid #ccc; background: #fff; vertical-align: middle; margin-right: 10px; } .quiz-answer.active:before { background-color: #333; border-color: #333; } .quiz-answer.correct:before { background-color: green; border-color: green; } .quiz-answer.incorrect:before { background-color: red; border-color: red; } .quiz-answer.active.correct:before { outline: 2px solid green; outline-offset: 2px; } .quiz-result { max-width: 960px; margin: 0 auto; font-weight: bold; text-align: center; color: #fff; padding: 20px; } .quiz-result.good { background: orange; } .quiz-result.mid { background: orange; } .quiz-result.bad { background: orange; } .show-tip { display: block!important; color:orange; } </style> </head> <body> <div class="quiz"> <h2 class="quiz-question">1) Ένας "χρυσός κανόνας" στο mindful eating είναι η κατανάλωση του φαγητού σε αργό ρυθμό</h2> <ul data-quiz-question="1"> <li class="quiz-answer" data-quiz-answer="t">Σωστό</li> <li class="quiz-answer" data-quiz-answer="f">Λάθος</li> <p class="quiz-tip" style="display: none;">TIP : Την ώρα του γεύματος σου, πιες μια γουλιά νερό ανά 3-4 λεπτά.</p> </ul> <h2 class="quiz-question">2) Το mindful eating αναφέρεται στο να εστιάζουμε την προσοχή μας σε αυτό που τρώμε κάθε φορά.</h2> <ul data-quiz-question="2"> <li class="quiz-answer" data-quiz-answer="t">Σωστό</li> <li class="quiz-answer" data-quiz-answer="f">Λάθος</li> <p class="quiz-tip" style="display: none;">TIP : Ετοίμαζε μικρές μπουκιές. Στην αρχή, μπορεί να σε βοηθήσει το να χρησιμοποιείς μικρότερα σκεύη (π.χ. μικρά μαχαιροπίρουνα, πιάτα κτλ)</p> </ul> <h2 class="quiz-question">3) Το mindful eating δεν βοηθάει στο να απολαύσουμε το φαγητό που τρώμε.</h2> <ul data-quiz-question="3"> <li class="quiz-answer" data-quiz-answer="t">Σωστό</li> <li class="quiz-answer" data-quiz-answer="f">Λάθος</li> <p class="quiz-tip" style="display: none;">TIP: Ποτέ μην τρως ενώ είσαι όρθιος (μπροστά στην πόρτα του ψυγείου κλπ.)</p> </ul> </div> <div class="quiz-result"></div> <script> var Quiz = function(){ var self = this; this.init = function(){ self._bindEvents(); } this.correctAnswers = [ { question: 1, answer: 't' }, { question: 2, answer: 't' }, { question: 3, answer: 'f' }, ] this._pickAnswer = function($answer, $answers){ $answers.find('.quiz-answer').removeClass('active'); $answer.addClass('active'); } this._calcResult = function(){ var numberOfCorrectAnswers = 0; $('ul[data-quiz-question]').each(function(i){ var $this = $(this), chosenAnswer = $this.find('.quiz-answer.active').data('quiz-answer'), correctAnswer; for ( var j = 0; j < self.correctAnswers.length; j++ ) { var a = self.correctAnswers[j]; if ( a.question == $this.data('quiz-question') ) { correctAnswer = a.answer; } } if ( chosenAnswer == correctAnswer ) { numberOfCorrectAnswers++; // highlight this as correct answer $this.find('.quiz-answer.active').addClass('correct'); $this.find('.quiz-tip').addClass('show-tip'); } else { $this.find('.quiz-answer[data-quiz-answer="'+correctAnswer+'"]').addClass('correct'); $this.find('.quiz-answer.active').addClass('incorrect'); } }); if ( numberOfCorrectAnswers == 1 ) { return {code: 'bad', text: 'Είχατε 1 σωστή απάντηση'}; } else if ( numberOfCorrectAnswers == 2 ) { return {code: 'mid', text: 'Είχατε 2 σωστές απαντησεις'}; } else if ( numberOfCorrectAnswers == 3 ) { return {code: 'good', text: 'Είχατε 3 σωστές απαντησεις'}; } } this._isComplete = function(){ var answersComplete = 0; $('ul[data-quiz-question]').each(function(){ if ( $(this).find('.quiz-answer.active').length ) { answersComplete++; } }); if ( answersComplete >= 3 ) { return true; } else { return false; } } this._showResult = function(result){ $('.quiz-result').addClass(result.code).html(result.text); } this._bindEvents = function(){ $('.quiz-answer').on('click', function(){ var $this = $(this), $answers = $this.closest('ul[data-quiz-question]'); self._pickAnswer($this, $answers); if ( self._isComplete() ) { // scroll to answer section $('html, body').animate({ scrollTop: $('.quiz-result').offset().top }); self._showResult( self._calcResult() ); $('.quiz-answer').off('click'); } }); } } var quiz = new Quiz(); quiz.init(); </script> </body> </html>
| ver. 1.4 |
Github
|
.
| PHP 8.2.32 | Генерация страницы: 0 |
proxy
|
phpinfo
|
Настройка