Question

我必须做一个多选运动发生器。顶部有一个ganerator，下面有一个显示区域，生成的测验应该添加到显示区域。在下面，您可以看到我的代码，任何人都可以帮我将这个表单从生成器添加到显示区域吗？

<!DOCTYPE HTML>
<html>
<head>
<meta charset = "UTF-8">
<title>Programming Project. 2015/2016</title>
<style>
.my-row {
    width: 500px;
    padding: 5px;

  }
  label {
    margin-right: 5px;
  }
  .label-left {
    text-align: right;
    vertical-align: top;
  }
  .label-right {
    text-align: left;
  }
  .error {
    color: #cc0000;
  }
  .highlighted {
    background-color: #ffffcc;
    </style>
    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script>


    $(document).ready(function() {
    $('#my_quest').submit(function(e) {
      var my_errors = false;
      $('.my-row > .error').remove(); 
      $('.my-row').removeClass('highlighted'); 

      $(':text').each(function() {

        if ($(this).val() == '') {
           $(this).parent().addClass('highlighted');
           $(this).parent().append('<div class="error">Please provide a  value</div>');
           my_errors = true;
        }

      });
      if (my_errors) {
         return false;
      }
      else {
         e.preventDefault();
         if (!confirm('Do you really want to submit the form?')) {
            return false;
         }

        }

        $ ("#send").click(function() {
       $ (".my-row").append("#displayArea")
       });
        });
        });


       </script>
       </head>
       <body>


       <div id = "generator">
       <form name="my_quest" id="my_quest" action="" method="post">
       <h2>Quiz Generator</h2>
       <div class = "my-row">
       <label for = "question" class="label-left">Question: </label>
        <input type = "text" name = "question" id = "question">
        </div></br>
        <div class = "my-row">
        <label for = "correctAnswer" class = "label-left">Correct answer:   </label>
        <input type = "text" name = "correctAnswer" id="correctAnswer">
        </div></br>
       <div class = "my-row">
        <label for = "incorrectAnswer" class = "label-left">Incorrect  answer: </label>
        <input type = "text" name = "incorrectAnswer" id = "incorrectAnswer">
        </div></br>
        <div class = "my-row">
        <label for = "incorrectAnswer" class = "label-left">Incorrect answer: </label>
        <input type = "text" name="incorrectAnswer" id = "incorrectAnswer">
        </div></br>
          <div class = "my-row">
        <label for = "incorrectAnswer" class = "label-left">Incorrect answer: </label>
        <input type = "text" name = "incorrectAnswer" id = "incorrectAnswer">
        </div></br>


        <div class="my-row">
        <input type="submit" name="submit" id="submit" value="Submit Form">
         </div> 
         </form>
         </div>
         <div id= "displayArea"></div>
         <div><button id= "send">Send</button></div>

       </body>
       </html>

多选发生器

0 个答案: