Попытка добавить кнопку отправки в тест

Question

Я принял этот тест из здесь некоторое время назад, и он работает хорошо, за исключением того, что был запрос на добавление кнопки отправки вместо продвижения теста, когда вы нажимаете на ответ.

Я попытался вызвать функцию updteStep () с помощью кнопки «Отправить» (после удаления ее из функции check (), но она просто не отвечает. Я попытался вызвать ее с помощью и onClick, и добавивEventListener. Я не уверен, куда идти отсюда.

Вы можете увидеть текущий работающий пример без кнопки отправки здесь jsfiddle .

Основной движок jquery здесь:

        var quizSteps = $('#quizzie .quiz-step'),
            //highScoreVariable = 9,
            categoryOneScore = 0,
            categoryTwoScore = 0,
            categoryThreeScore = 0;
        quizSteps.each(function () {
            var currentStep = $(this),

                ansOpts = currentStep.children('.quiz-answer');


            ansOpts.each(function () {
                var eachOpt = $(this);
                //var eachOpt = document.getElementById('submit');
                eachOpt[0].addEventListener('click', check, false);
                //document.getElementById("submit").addEventListener('click', check, false);

                function check() {
                    var $this = $(this);
                    var cat1Answer = $this.attr('data-quizIndexCat1');
                    if (typeof cat1Answer !== typeof undefined && cat1Answer !== false) {
                        categoryOneScore += parseInt(cat1Answer);
                        //alert('P' + categoryOneScore);
                    }
                    var cat2Answer = $this.attr('data-quizIndexCat2');
                    if (typeof cat2Answer !== typeof undefined && cat2Answer !== false) {
                        categoryTwoScore += parseInt(cat2Answer);
                       // alert('B' + categoryTwoScore);
                    }
                    var cat3Answer = $this.attr('data-quizIndexCat3');
                    if (typeof cat3Answer !== typeof undefined && cat3Answer !== false) {
                        categoryThreeScore += parseInt(cat3Answer);
                       // alert('D' + categoryThreeScore);
                    }
                    $this.addClass('active');
                    $('current').fadeOut(1000).fadeIn(1000);
                    calcResults();
                    updateStep(currentStep);
                }
            });

            function updateStep(currentStep) {
                if (currentStep.hasClass('current')) {
                    //currentStep.removeClass('current').fadeTo("slow");
                    currentStep.slideUp(500, function() {
                    $(this).removeClass('current');
                    });
                    //currentStep.removeClass('current');
                    currentStep.next().slideDown(500, function() {
                    $(this).addClass('current');
                    });
                    //currentStep.next().addClass('current');
                    //alert (quizSteps);
                    window.console.log(quizSteps);
                }
            }
            function calcResults() {
                // only update the results div if all questions have been answered
                if (quizSteps.find('.active').length == quizSteps.length) {
                    window.console.log(" Procrastinator score is =" + categoryOneScore);
                    window.console.log("Busy Bee score is =" + categoryTwoScore);
                    window.console.log("Distracted score is =" + categoryThreeScore);
                    //alert (quizSteps);

                    var msgIndex = 0;
                    if ((categoryOneScore == 3 &&
                            categoryOneScore == categoryThreeScore  &&
                            categoryOneScore == categoryTwoScore) ) {
                        msgIndex = 7;

                    }
                    else if ((categoryOneScore == categoryTwoScore &&
                            categoryTwoScore == categoryThreeScore) ) {
                        msgIndex = 3;

                    } 
                    else if ((categoryOneScore == categoryTwoScore &&
                            categoryTwoScore > categoryThreeScore) ) {
                        msgIndex = 4;
                        //alert ('Case 2');

                    }
                    else if ((categoryOneScore == categoryThreeScore &&
                            categoryThreeScore > categoryTwoScore) ) {
                        msgIndex = 5;

                    }
                    else if ((categoryTwoScore == categoryThreeScore &&
                            categoryThreeScore > categoryOneScore) ) {
                        msgIndex = 6;

                    }
                    else if ((categoryOneScore >= categoryTwoScore &&
                        categoryOneScore >= categoryThreeScore) ) {
                        msgIndex = 0;

                    }
                    else if ((categoryTwoScore >= categoryOneScore &&
                            categoryTwoScore >= categoryThreeScore) ) {
                        msgIndex = 1;

                    }  
                    else if ((categoryThreeScore >= categoryOneScore &&
                            categoryThreeScore >= categoryTwoScore) ) {
                        msgIndex = 2;
                    }  

                    var resultsTitle = $('#results h1'),
                        resultsDesc = $('#results .desc');
                    resultsTitle.replaceWith("<h1>" + resultOptions[msgIndex].title + "</h1>");
                    resultsDesc.replaceWith("<p class='desc'>" + resultOptions[msgIndex].desc + "</p>");
                    window.CP.exitedLoop(6);
                    //document.getElementById("instrct").style.opacity="0";
                    //alert(msgIndex);

                }
            }

        });

Полагаю, я просто искал идею о том, как вызвать вызываемую в данный момент функцию, щелкнув ответ, вместо этого нажав кнопку отправки.

Answer 1

updateStep является "частным" для ansOpt.each, поэтому вы не можете вызвать его с помощью кнопки отправки.Вам нужно переместить / выставить эту функцию туда, где ее можно вызвать, затем вы можете вызвать ее, используя текущий активный вопрос.

Проще говоря:

$("#submit").click(function() {
  updateStep($(".current"))
});

function updateStep(currentStep) {

Обновленная скрипта: https://jsfiddle.net/sph42onb/1/

Я бы, вероятно, сделал несколько других изменений, таких как пространство имен в вышеуказанной функции (как сейчас) и используя более конкретное имя класса, чем .current, которое возможно может быть использовано в другом месте на вашей странице.