如何使用html css，javascript

-7

開發一個在線問卷頁面我想用html，css，javascript開發一個問卷頁面，其中每個問題必須在帶有選項的單獨頁面中加載（點擊類型），某些問題會有與其他選項的答案也不止一個。如何使用html css，javascript

請幫助一些示例代碼。

謝謝

來源

2016-09-19 Arpit Gupta

谷歌吧哥們。你不能來這裏，要求示例代碼。 – JeetDaloneboy

在請求免費代碼之前，請自行嘗試。 – codemax

我希望它可以幫助你。

(function() { 
 
    var questions = [{ 
 
     question: "What is 2*5?", 
 
     choices: [2, 5, 10, 15, 20], 
 
     correctAnswer: 2 
 
    }, { 
 
     question: "What is 3*6?", 
 
     choices: [3, 6, 9, 12, 18], 
 
     correctAnswer: 4 
 
    }, { 
 
     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(); 
 
      } 
 
     }); 
 
    } 
 

 
    // Computes score and returns a paragraph element to be displayed 
 
    function displayScore() { 
 
     var score = $('<p>', { 
 
      id: 'question' 
 
     }); 
 

 
     var numCorrect = 0; 
 
     for (var i = 0; i < selections.length; i++) { 
 
      if (selections[i] === questions[i].correctAnswer) { 
 
       numCorrect++; 
 
      } 
 
     } 
 

 
     score.append('You got ' + numCorrect + ' questions out of ' + 
 
      questions.length + ' right!!!'); 
 
     return score; 
 
    } 
 
})();

body { 
 
    font-family: Open Sans; 
 
} 
 
h1 { 
 
    text-align: center; 
 
} 
 
#title { 
 
    text-decoration: underline; 
 
} 
 
#quiz { 
 
    text-indent: 10px; 
 
    display: none; 
 
} 
 
.button { 
 
    border: 4px solid; 
 
    border-radius: 5px; 
 
    width: 40px; 
 
    padding-left: 5px; 
 
    padding-right: 5px; 
 
    position: relative; 
 
    float: right; 
 
    background-color: #DCDCDC; 
 
    color: black; 
 
    margin: 0 2px 0 2px; 
 
} 
 
.button.active { 
 
    background-color: #F8F8FF; 
 
    color: #525252; 
 
} 
 
button { 
 
    position: relative; 
 
    float: right; 
 
} 
 
.button a { 
 
    text-decoration: none; 
 
    color: black; 
 
} 
 
#container { 
 
    width: 50%; 
 
    margin: auto; 
 
    padding: 0 25px 40px 10px; 
 
    background-color: #1E90FF; 
 
    border: 4px solid #B0E0E6; 
 
    border-radius: 5px; 
 
    color: #FFFFFF; 
 
    font-weight: bold; 
 
    box-shadow: 5px 5px 5px #888; 
 
} 
 
ul { 
 
    list-style-type: none; 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 
#prev { 
 
    display: none; 
 
} 
 
#start { 
 
    display: none; 
 
    width: 90px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
     <title>Dynamic Quiz Project</title> 
 
     <link type='text/css' rel='stylesheet' href='stylesheet.css'/> 
 
     <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Open Sans"/> 
 
    </head> 
 
    <body> 
 
     <div id='container'> 
 
      <div id='title'> 
 
       <h1>Learning Js Properly: Project #1 - Dynamic Quiz</h1> 
 
      </div> 
 
      <br/> 
 
      <div id='quiz'></div> 
 
      <div class='button' id='next'><a href='#'>Next</a></div> 
 
      <div class='button' id='prev'><a href='#'>Prev</a></div> 
 
      <div class='button' id='start'> <a href='#'>Start Over</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> 
 
    </body> 
 
</html>

幫助鏈接：

來源

2016-09-19 06:14:43

嘿感謝您的幫助，但什麼questions.json和jsquiz.js文件在這裏做，從哪裏我可以得到這些文件。謝謝 –

@ArpitGupta他們沒有必要。 –

嗨，請你幫我我如何在數據庫中提交這些數據後點擊提交 –

如何使用html css，javascript

回答

相關問題