如何添加其他(输入文本选项)在一个javascript测验页面

我已经开发了一个测验页面，其中每个问题必须在单独的页面加载选项(点击类型)，某些问题将有一个以上的答案与其他选项。在问卷调查的最后，用户必须填写表格。选择在提交之前最后查看所有答案/信息。

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

(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="answerswer" 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="answerswer"]: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 -->

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