wie man andere hinzufügen (Eingabe Text Option) in einer Javascript Quiz Seite

Question

Ich habe eine Quiz-Seite, wo jede Frage in separate Seite mit Optionen (Klick-Typ) geladen werden, bestimmte Fragen werden mehr als eine Antwort mit anderen haben Option auch. Am Ende des Fragebogens muss der Benutzer das Formular ausfüllen. Möglichkeit, alle Antworten/Informationen vor dem Abschicken zu überprüfen.

Ich möchte andere (Eingabe Text Option) in einigen Fragen hinzufügen, aber ich bin nicht in der Lage, dies hinzuzufügen. Ich habe meinen Code angebracht ist, haben Sie einen Blick und mir einen Rat geben

(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 
 
    =================== 
 
\t 
 
    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 { 
 
\t width:100%; 
 
\t height:100px; 
 
\t border:1px solid #000; 
 
} 
 
#logo{ 
 
\t clear:both; 
 
\t 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> 
 
\t 
 
\t <!-- Bootstrap --> 
 
    <link rel="stylesheet" type="text/css" href="CSS/bootstrap.css" > 
 

 
    <!-- Theme Style --> 
 
    <link rel="stylesheet" type="text/css" href="CSS/style.css"> 
 
\t 
 
</head> 
 
<body class="no-transition stretched"> 
 

 
<div id="wrapper" class="clearfix"> 
 
<header id="header" class="full-header"> 
 

 
\t \t \t \t \t <!-- Logo--> 
 
\t \t \t \t \t <div id="logo"> 
 
\t \t \t \t \t \t <a href="index.html" class="standard-logo"><img src="images/sequreone-logo.png" alt="Secqureone Logo"></a> 
 
\t \t \t \t \t </div><!-- #logo end --> 
 
</header> \t \t \t 
 

 
<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 -->

Bitte helfen Sie mir Eingabetext Option in Fragen hinzufügen

Answer 1

versuchen, mit diesen zu ersetzen:

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

Ich habe ein weiteres Element zu Fragen Array hinzugefügt und createRadios() -Funktiongeändertso Ihren Code mit dieser Modifikation bearbeiten und mir sagen, was

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

passiert Hier gehen Sie:

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 
     }] 

jetzt, dass Textfelder sind dort müssen Sie einige Javascript hinzufügen, ihre Werte zu erhalten. Ich nehme an, Sie Dinge von dort