Question

我已经开发了一个测验页面，其中每个问题都必须在带有选项（点击类型）的单独页面中加载，某些问题也会有其他选项的多个答案。在问卷结束时，用户必须填写表格。在提交之前最终审查所有答案/信息的选项。

我想在一些问题中添加其他（输入文本选项），但我无法添加此内容。我附上了我的代码，请看一下并给我一些建议

(function() {
    var questions = [{
        question: "Does Your Business have IT Security Policies and Procedures?",
        choices:[ "yes",
"No"],
    }, {
        question: "What is 8*9?",
        choices: [72, 99, 108, 134, 156],
        correctAnswer: 0
    }, {
        question: "What is 1*7?",
        choices: [4, 5, 6, 7, 8],
        correctAnswer: 3
    }, {
        question: "What is 8*8?",
        choices: [20, 30, 40, 50, 64],
        correctAnswer: 4
    }];

    var questionCounter = 0; //Tracks question number
    var selections = []; //Array containing user choices
    var quiz = $('#quiz'); //Quiz div object

    // Display initial question
    displayNext();

    // Click handler for the 'next' button
    $('#next').on('click', function(e) {
        e.preventDefault();

        // Suspend click listener during fade animation
        if (quiz.is(':animated')) {
            return false;
        }
        choose();

        // If no user selection, progress is stopped
        if (isNaN(selections[questionCounter])) {
            alert('Please make a selection!');
        } else {
            questionCounter++;
            displayNext();
        }
    });

    // Click handler for the 'prev' button
    $('#prev').on('click', function(e) {
        e.preventDefault();

        if (quiz.is(':animated')) {
            return false;
        }
        choose();
        questionCounter--;
        displayNext();
    });

    // Click handler for the 'Start Over' button
    $('#start').on('click', function(e) {
        e.preventDefault();

        if (quiz.is(':animated')) {
            return false;
        }
        questionCounter = 0;
        selections = [];
        displayNext();
        $('#start').hide();
    });

    // Animates buttons on hover
    $('.button').on('mouseenter', function() {
        $(this).addClass('active');
    });
    $('.button').on('mouseleave', function() {
        $(this).removeClass('active');
    });

    // Creates and returns the div that contains the questions and 
    // the answer selections
    function createQuestionElement(index) {
        var qElement = $('<div>', {
            id: 'question'
        });

        var header = $('<h2>Question ' + (index + 1) + ':</h2>');
        qElement.append(header);

        var question = $('<p>').append(questions[index].question);
        qElement.append(question);

        var radioButtons = createRadios(index);
        qElement.append(radioButtons);

        return qElement;
    }

    // Creates a list of the answer choices as radio inputs
    function createRadios(index) {
        var radioList = $('<ul>');
        var item;
        var input = '';
        for (var i = 0; i < questions[index].choices.length; i++) {
            item = $('<li>');
            input = '<input type="radio" name="answer" value=' + i + ' />';
            input += questions[index].choices[i];
            item.append(input);
            radioList.append(item);
        }
        return radioList;
    }

    // Reads the user selection and pushes the value to an array
    function choose() {
        selections[questionCounter] = +$('input[name="answer"]:checked').val();
    }

    // Displays next requested element
    function displayNext() {
        quiz.fadeOut(function() {
            $('#question').remove();

            if (questionCounter < questions.length) {
                var nextQuestion = createQuestionElement(questionCounter);
                quiz.append(nextQuestion).fadeIn();
                if (!(isNaN(selections[questionCounter]))) {
                    $('input[value=' + selections[questionCounter] + ']').prop('checked', true);
                }

                // Controls display of 'prev' button
                if (questionCounter === 1) {
                    $('#prev').show();
                } else if (questionCounter === 0) {

                    $('#prev').hide();
                    $('#next').show();
                }
            } else {
                var scoreElem = displayScore();
                quiz.append(scoreElem).fadeIn();
                $('#next').hide();
                $('#prev').hide();
                $('#start').show();
            }
        });
    }
})();

    
    CSS INDEX
    ===================
	
    1. Theme Default CSS (body, link color, section etc)
    2. Header Area
    3. Slider Area
    4. Feature Area
    5. Service Area
    6. Video Area
    7. Features Carousel Area
    8. Pricing Area
    9. Clients Area
    10. Blog Area
    11. Download Area
    12. Contact Area
    13. Footer Area
    14. Image, Solid, Gradient, Transparent, Video Background Area
    15. Light Section Style
    16. Layout Two Style
    17. Scroll Up Start
-----------------------------------------------------------------------------------*/

/*----------------------------------------*/
/*  1. Theme default CSS
/*----------------------------------------*/
* { margin:0; padding:0; }
html, body {height: 100%;}
.floatleft {float:left !important;}
.floatright {float:right !important;}
.floatnone {float:none !important;}
.alignleft {text-align:left !important;}
.alignright {text-align:right !important;}
.aligncenter {text-align:center !important;}
.no-display { display:none; }
.no-margin { margin:0 !important; }
.no-padding { padding:0 !important; }
a:focus, button:focus {outline:0px solid}
img {
    max-width:100%;
    height:auto;
    border:0; 
    vertical-align:top;
}
.fix {overflow:hidden}
p {
    font-family: "Neuton",serif;
    font-weight: 300;
    line-height: 24px;
    margin: 0 0 15px;
}
h1, h2, h3, h4, h5, h6 {
    margin: 0 0 10px;
}
a {transition: all 0.3s ease 0s;text-decoration:none;}
a:hover {
    color: #fff;
    text-decoration: none;
}
a:active, a:hover, a:focus {
  outline: 0 none;
    text-decoration: none
}
ul{
    list-style: outside none none;
    margin: 0;
    padding: 0
}
.clear{clear:both}
::-moz-selection {
    background: #b3d4fc;
    text-shadow: none;
}
.browserupgrade {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}
::selection {
    background: #b3d4fc;
    text-shadow: none;
}
body {
  color: #D0D0D0;
  font-family: "montserratregular";
  font-size: 16px;
  line-height: 20px;
  text-align: left;
}
#header {
	width:100%;
	height:100px;
	border:1px solid #000;
}
#logo{
	clear:both;
	margin:20px;
}
#logo a {
    display: block;
    margin-left: -18px;
    position: relative;
}

<!DOCTYPE html>
<!--[if IE 8 ]><html class="ie" xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-US" lang="en-US"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!--><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-US" lang="en-US"><!--<![endif]-->
<head>
    <!-- Basic Page Needs -->
    <meta charset="utf-8">
    <!--[if IE]><meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1'><![endif]-->
    <title>Security Simplified</title>
	
	<!-- Bootstrap  -->
    <link rel="stylesheet" type="text/css" href="CSS/bootstrap.css" >

    <!-- Theme Style -->
    <link rel="stylesheet" type="text/css" href="CSS/style.css">
	
</head>
<body class="no-transition stretched">

<div id="wrapper" class="clearfix">
<header id="header" class="full-header">

					<!-- Logo-->
					<div id="logo">
						<a href="index.html" class="standard-logo"><img src="images/sequreone-logo.png" alt="Secqureone Logo"></a>
					</div><!-- #logo end -->
</header>			

<div id='quiz'></div>
            <div class='button' id='next'><a href='#'>Next</a></div>
            <div class='button' id='prev'><a href='#'>Prev</a></div>
            <!-- <button class='' id='next'>Next</a></button>
                <button class='' id='prev'>Prev</a></button>
                <button class='' id='start'> Start Over</a></button> -->
        </div>
        <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js'></script>

</div> <!-- end of wrapper -->

请帮我在问题中添加输入文字选项

Answer 1

尝试替换为：

var questions = [{
        question: "Does Your Business have IT Security Policies and Procedures?",
        choices:[ "yes","No","Others"],
    }, {
        question: "What is 8*9?",
        choices: [72, 99, 108, 134, 156,"Others"],
        correctAnswer: 0
    }, {
        question: "What is 1*7?",
        choices: [4, 5, 6, 7, 8,"Others"],
        correctAnswer: 3
    }, {
        question: "What is 8*8?",
        choices: [20, 30, 40, 50, 64,"Others"],
        correctAnswer: 4
    }];

Answer 2

我在问题数组和修改后的createRadios（）函数中添加了另一个项目所以用这个修改编辑你的代码并告诉我发生了什么

var questions = [{
    question: "Does Your Business have IT Security Policies and Procedures?",
    choices:[ "yes",
"No"], 
    questionMode: 2
}, {
    question: "What is 8*9?",
    choices: [72, 99, 108, 134, 156],
    correctAnswer: 0,
    questionMode: 2
}, {
    question: "What is 1*7?",
    choices: [4, 5, 6, 7, 8],
    correctAnswer: 3,
    questionMode: 2
}, {
    question: "What is 8*8?",
    choices: [20, 30, 40, 50, 64],
    correctAnswer: 4,
    questionMode: 2
},{
    question: "What is your name?",
    choices: null,
    questionMode: 1
}];


function createRadios(index) {
    var radioList = $('<ul>');
    var item;
    var input = '';
if(questions[index].questionMode === 2)
{
    for (var i = 0; i < questions[index].choices.length; i++) {
        item = $('<li>');
        input = '<input type="radio" name="answer" value=' + i + ' />';
        input += questions[index].choices[i];
        item.append(input);
        radioList.append(item);
    }
 }
 else (questions[index].questionMode === 1)
{
 item = $('<li>');
        input = questions[index].choices[i];
        input += '<input type="text" name="answer"/>';
        item.append(input);
        radioList.append(item);
}
    return radioList;
}

Answer 3

你走了：

var others="Others<input type='text' />";
    (function() {
        var questions = [{
            question: "Does Your Business have IT Security Policies and Procedures?",
            choices:[ "yes","No",others],
        }, {
            question: "What is 8*9?",
            choices: [72, 99, 108, 134, 156,others],
            correctAnswer: 0
        }, {
            question: "What is 1*7?",
            choices: [4, 5, 6, 7, 8,others],
            correctAnswer: 3
        }, {
            question: "What is 8*8?",
            choices: [20, 30, 40, 50, 64,others],
            correctAnswer: 4
        }]

现在文本字段在那里你需要添加一些javascript来获取它们的值。我假设你可以从那里恢复事情

如何在javascript测验页面中添加其他（输入文本选项）

3 个答案: