VPF::Как добавить второй вариант - Форум программистов

AndruhaLive

Дата 8.6.2017, 14:19 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 1
Регистрация: 8.6.2017

Репутация: нет
Всего: нет

Есть вот такой код:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
<title>Тест 12</title>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<link rel="stylesheet" href="http://ruseller.com/lessons/les1815/bootstrap/css/mbootstrap.css" />
<style type="text/css">
    .main-quiz-holder {
        text-align: center;
    }

    .main-quiz-holder  .slide-container ul.answers {
        margin: 0px;
        list-style: none;
    }

    .main-quiz-holder .slide-container ul.answers li {
        cursor: pointer;
        padding: 6px 30px;
        margin: 10px 0;
        display: block;
        text-align: left;
    }

    .main-quiz-holder .question {
        display: none;
    }

    .main-quiz-holder {
        margin: 0px auto;
        padding: 20px 0px;
        /*position: relative;
        background: #FCFCFC;*/
        border: 1px solid #dedede;
        /*box-shadow: 0 1px 5px #D9D9D9,inset 0 10px 20px #F1F1F1;
        border-radius: 10px 10px 10px 10px;*/
        width: 600px;
    }

    .main-quiz-holder .slide-container {
        margin: 0px auto;
        width: 500px;
    }

    .main-quiz-holder .question {
        padding-left: 5px;
        line-height: 1.3em;
    }

    .main-quiz-holder .notice {
        display: none;
        text-align: center;
        margin: 0px 0px 15px 0px;
    }

    .main-quiz-holder .nav-container {
        margin: 15px 0px;
    }

    .main-quiz-holder .progress {
        margin: 0px auto;
        width: 500px;
        height: 25px;
    }

    .main-quiz-holder .nav-container button.btn-success {
        float: right;
    }

    .main-quiz-holder .results button.btn-success, .main-quiz-holder .results button.btn-danger {
        margin: 3px;
    }

    .main-quiz-holder .results * {
        margin: 0px auto;
    }

    .main-quiz-holder .progress {
        display: none;
    }
</style>

<script type="text/javascript">
var questions = [
    {
        type: "choose",
        question: "<h3>Вариант 1</h3>",
        answers: [
            "-8π/15",
            "-0,6π",
            "-16π/15",
            "-0,3π"
        ],
        correct: [1]
    },
    {
        type: "choose",
        question: "<h3>Найдите градусную меру угла, радианная мера которого равна 3π/10</h3>",
        answers: [
            "108°",
            "(1/200)°",
            "(1/600)°",
            "54°",
        ],
        correct: [4]
    },
    {
        type: "choose",
        question: "<h3>Определите знак выражения sin290°×cos70°×tg100°</h3>",
        answers: [
            "+",
            "-",
            "Определить знак невозможно"

        ],
        correct: [1]
    },
    {
        type: "choose",
        question: "<h3>Углом какой четверти является угол α, если cosα<0 и ctgα>0</h3>",
        answers: [
            "Ⅰ",
            "Ⅱ",
            "Ⅳ",
            "Ⅲ"
        ],
        correct: [4]
    },
    {
        type: "choose",
        question: "<h3>В какой четверти находится точка, соответствующая числу -10π/7</h3>",
        answers: [
            "Ⅰ",
            "Ⅱ",
            "Ⅳ",
            "Ⅲ"
        ],
        correct: [2]
    },
    {
        type: "choose",
        question: "<h3>Укажите наименьшее значение выражение 7+sinα</h3>",
        answers: [
            "9",
            "-6",
            "4",
            "6"

        ],
        correct: [4]
    },
    {
        type: "choose",
        question: "<h3>Вычислите 3√2sin(-1125)°</h3>",
        answers: [
            "-3", "10", "2", "-4"
        ],
        correct: [1]
    },
    {
        type: "choose",
        question: "<h3>Найдите значение выражения 3sin30°-√3sin60°ctg45°tg30°+0,5√3</h3>",
        answers: [
            "-1,3", "2,6","1,5", "3,5"
        ],
        correct: [3]
    },

];

$("document").ready(function(){
    $("#quizler").jQuizler(questions);
});

(function($){
    $.fn.extend({
        jQuizler: function(questions) {
            // @todo избавиться от возможности двойного клика по кнопкам "cследующий", "предыдущий", "результат"
            // @todo добавить возможность выбора нескольких вариантов ответа
            // @todo добавить возможность внедрения названия теста на страницу результатов
            // @todo избавиться от зависимости Bootsrap CSS
            // @todo поработать над стилем элементов кнопок и прогресса
            // @todo добавить кнопки "поделиться" или "like" для разных соц сетей ("ВКонтакте", "Однолкассники", ...)
            // @todo разобраться с проблемой клика по элементу кнопки на странице результатов
            // @todo переписать код, сделать его более изящным и чистым
            // @todo сделать так, чтобы плагин можно было применять для 2х и более тестов на страницу
            // @todo создать online инструмент для формирования и редактирования вопросов

            if (questions == null)
                throw 'No questions was provided.';

            var reviewQuiz = false;

            var percentage = 0;
            var percentPiece = 100 / questions.length;

            var rightAnswers = 0;

            $(this).html("<div class=\"intro\">" + $(this).html() + "</div>");

            $(this).click(function(){
                $(this).off('click');

                $(".intro").hide();
                $(this).css("text-align", "left");
                $('.progress').css("display", "block");

                var question = $("#question-1");

                question.css({opacity : '0', height : '0px'});

                question.animate({
                    opacity : '1',
                    height : '100%'
                }, 500, function(e){});

                question.css('display', 'block');

                percentage += percentPiece;
                $(".progress div").css("width", percentage + "%");
            });

            (function($){
                $.shuffle = function(arr) {
                    for(
                            var j, x, i = arr.length; i;
                            j = parseInt(Math.random() * i),
                                    x = arr[--i], arr[i] = arr[j], arr[j] = x
                            );
                    return arr;
                }
            })(jQuery);

            String.prototype.replaceAll = function (find, replace) {
                var str = this;
                return str.replace(new RegExp(find, 'g'), replace);
            };

            return this.each(function(){
                var html = "";

                html += "<div class=\"results slide-container question\" style=\"display:none\"></div>";

                $.each(questions, function(index, question){
                    html += "<div id=\"question-" + (index + 1) + "\" class=\"slide-container question\">";
                    //html += "<div class=\"question-number\">Вопрос " + (index + 1) + ' из ' + questions.length + "</div><div style=\"margin:0px; clear:both\"></div>";

                    html += question.question;

                    var correctAnswers = [];
                    for (var i = 0; i < question.correct.length; i++)
                        correctAnswers.push(question.answers[question.correct[i] - 1]);

                    question.answers = $.shuffle(question.answers);

                    var correctAnswersNewIndexes = [];
                    for (var i = 0; i < question.correct.length; i++)
                        correctAnswersNewIndexes.push(question.answers.indexOf(correctAnswers[i]));

                    question.correct = correctAnswersNewIndexes;

                    /*for (var i = 0; i < question.correct.length; i++)
                     console.log(question.answers[correctAnswersNewIndexes[i]]);*/

                    html += "<ul class=\"answers\">";

                    for (var i = 0; i < question.answers.length; i++)
                        html += "<li class=\"btn\">" + question.answers[i] + "</li>";

                    html += "</ul>";
                    html += "<div class=\"nav-container\">";

                    html += "<div class=\"notice alert alert-info\">Выберите ответ</div>";


                        html += "<a href='../tests.php'><button class=\"prev btn btn-info\"><i class='icon-arrow-left icon-white'></i>Прервать тест</button></a>";


                    if (index != questions.length-1) {
                        html += "<button class=\"next btn btn-success\">Следующий <i class='icon-arrow-right icon-white'></i></button>";
                        html += "<div style=\"clear:both\"></div>";

                    } else {
                        html += "<button class=\"final btn btn-success\">Результат <i class='icon-ok icon-white'></i></button>";
                        html += "<div style=\"clear:both\"></div>";
                    }

                    html += "</div></div>";

                    html += "</div>";
                });

                html += "<div class=\"progress progress-info progress-striped\">";
                html += "<div id=\"percent\" class=\"bar\" style=\"width: 0%;\"></div>";
                html += "</div>";

                ///html += "<div style=\"margin:0px; clear:both\"></div>";
                $(this).append(html);

                $("div[id*='question-'] li").click(function(){
                    if (!reviewQuiz) {
                        /*$(this).siblings().removeClass("selected");
                        $(this).toggleClass("selected");*/

                        $(this).siblings().removeClass("btn-info");
                        $(this).toggleClass("btn-info");
                    }
                });

                $(".final").click(function(e){
                    var div = $(e.target).closest("div[id*='question-']");
                    var userAnswer = div.find("li.btn-info");

                    if (userAnswer.index() == -1 && !reviewQuiz) {
                        var notice = div.find(".notice");
                        notice.css('opacity', '0');

                        notice.animate({
                            opacity: 1
                        }, 500, function(){});

                        div.find(".notice").css('display', 'block');
                    } else if (!reviewQuiz) {
                        div.find(".notice").css('display', 'none');

                        percentage += percentPiece;
                        if (percentage > 100) percentage = 100;
                        $("#percent").css("width", percentage + "%");

                        var resultHTML = "<h3 style=\"text-align: center\">РЕЗУЛЬТАТЫ</h3>";

                        var buttonsHTML = '';
                        $.each(questions, function(index, question){
                            //console.log("Правильные ответы: " + question.correct);

                            var element = $("#question-" + (index+1) + " ul li.btn-info");
                            //console.log("Ответ пользователя: " + element.index());

                            if (element.index() == question.correct) {
                                element.removeClass("btn-info");
                                element.addClass("btn-success");

                                buttonsHTML += "<button class=\"btn btn-success\"><i class='icon-ok-sign icon-white'></i> Вопрос " + (index+1) + "</button>";
                                rightAnswers++;
                            } else {
                                element.removeClass("btn-info");
                                element.addClass("btn-danger");

                                buttonsHTML += "<button class=\"btn btn-danger\"><i class='icon-remove-sign icon-white'></i> Вопрос " + (index+1) + "</button>";

                                for (var i=0; i<question.correct.length; i++) {
                                    element.parent().find('li').eq(question.correct[i]).addClass("btn-success");
                                }
                            }
                        });

                        resultHTML += "<p style=\"margin: 14px 0px\">Вы ответили на " + Math.round(((rightAnswers * 100) / questions.length) * 100) / 100 + "% вопросов.</p>";
                        resultHTML += buttonsHTML;
                        resultHTML += "<p style=\"margin-top:25px; text-align: center\"><button class=\"btn btn-large tostart\">Просмотреть вопросы</button></p>";

                        div.animate({
                            opacity : '0'
                        }, 500, function(e){
                            div.css('display', 'none');
                            div.find(".notice").css('display', 'none');

                            $(".results").append(resultHTML);
                            $(".results").css("opacity", "0");
                            $(".results").css("display", "block");

                            $(".results").animate({
                                opacity : '1'
                            }, 500, function(e){
                            });
                        });

                        $(".progress").animate({
                            opacity : '0'
                        }, 100, function(e){});

                        reviewQuiz = true;
                    } else {
                        $(".results").animate({
                            opacity: "1",
                            display: "block"
                        }, 100, function(e){});

                        div.animate({
                            opacity : '0'
                        }, 500, function(e){
                            div.css('display', 'none');
                            div.find(".notice").css('display', 'none');

                            $(".results").append(resultHTML);
                            $(".results").css("opacity", "0");
                            $(".results").css("display", "block");

                            $(".results").animate({
                                opacity : '1'
                            }, 500, function(e){
                            });
                        });

                        $(".progress").animate({
                            opacity : '0'
                        }, 100, function(e){});
                    }

                    return false;
                });

                $(".next").click(function(e){
                    var div = $(e.target).closest("div[id*='question-']");
                    var userAnswer = div.find("li.btn-info");

                    if (userAnswer.index() == -1 && !reviewQuiz) {
                        var notice = div.find(".notice");
                        notice.css('opacity', '0');

                        notice.animate({
                            opacity: 1
                        }, 500, function(){});

                        div.find(".notice").css('display', 'block');
                    } else {

                        var nextId = parseInt(div.attr('id').replace('question-', '')) + 1;
                        //console.log(nextId);

                        var newQuestion = $("#question-" + nextId);

                        div.animate({
                            opacity : '0'
                        }, 500, function(e){
                            div.css('display', 'none');
                            div.find(".notice").css('display', 'none');

                            newQuestion.css({opacity : '0', height : '0px'});

                            newQuestion.animate({
                                opacity : '1',
                                height : '100%'
                            }, 500, function(e){});

                            newQuestion.css('display', 'block');
                        });

                        percentage += percentPiece;
                        $(".progress div").css("width", percentage + "%");
                    }

                    return false;
                });

                $(".prev").click(function(e){

                });

                $(".results").click(function(e){
                    $(".results").animate({opacity: 0}, 500, function(e){
                        $(".results").css("display", "none");

                        var question = $("#question-1");

                        question.css({opacity : '0', height : '0px'});

                        question.animate({
                            opacity : '1',
                            height : '100%'
                        }, 500, function(e){});

                        question.css('display', 'block');

                        $(".progress div").css("width", "0");
                        $(".progress div").css("display", "block");
                        $(".progress").animate({
                            opacity : '1'
                        }, 300, function(e){
                            percentage = 0;
                            percentage += percentPiece;
                            $(".progress div").css("width", percentage + "%");
                        });
                     });
                });
            });
        }
    });

})(jQuery);

</script>

</head>
<body>
    <br />
    <div id="quizler" class="main-quiz-holder">
          <h2>Тест 12</h2>
         <button class="btn btn-large">Вариант 1</button>
         <button class="btn btn-large">Вариант 2</button>
   </div>
</body>
</html>

При нажатии на кнопку "Вариант 1" выскакивают вопросы для первого варианта, как сделать так, чтобы при нажатии на кнопку "Вариант 2" выскакивали вопросы уже для второго варианта

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| JavaScript: для новичков \| Следующая тема »