Feedback form

by Manjula Dhamodharan

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/remodal/1.0.6/remodal.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/remodal/1.0.6/remodal.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/remodal/1.0.6/remodal.css  Copy https://cdnjs.cloudflare.com/ajax/libs/remodal/1.0.6/remodal.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/remodal/1.0.6/remodal.css">

<video class="courseVideo" style="width:640px;" controls="controls" src="http://www.bigbuckbunny.org/" onended="videoEnded()"><br>
                                        </video>




<a href="#modal">Call the modal with data-remodal-id="modal"</a>

<div class="remodal" data-remodal-id="modal">
  <button data-remodal-action="close" class="remodal-close"></button>
    <fieldset class="rating">
                                <h2>Rate the videos</h2>
                                <input type="radio" id="star5" name="rating" value="5" /><label for="star5" title="Rocks!">5 stars</label>
                                <input type="radio" id="star4" name="rating" value="4" /><label for="star4" title="Pretty good">4 stars</label>
                                <input type="radio" id="star3" name="rating" value="3" /><label for="star3" title="Meh">3 stars</label>
                                <input type="radio" id="star2" name="rating" value="2" /><label for="star2" title="Kinda bad">2 stars</label>
                                <input type="radio" id="star1" name="rating" value="1" /><label for="star1" title="Sucks big time">1 star</label>
                            </fieldset>
                            <div class="Questions">

                            </div>
 
</div>

JavaScript

$(document).ready(function(){
        $('.rating input[name="rating"]').on('click', function() {
  var n = $('.rating input[name="rating"]:checked').val();
  alert(n);
  if (n <= 3) {
      $('#Question1').remove();
      $('#Question2').remove();
      
    $('.Questions').append("<div class='newbox' id='Question1'><h2 style='text-align:left' >What you didn't like about the video?</h2><div class='optionWrapper'><input class='optionButton' type='radio'  name='radio'/><div class='option'>A. Animation is poor</div><input class='optionButton' type='radio'  name='radio'/><div class='option'>B. I could not understand the video</div><input   type='radio' class='optionButton' name='radio'/><div class='option'>C. It is not correctly explained</div><input class='optionButton'  type='radio' name='radio'/><div class='option'>D. It is not useful for interviews</div><button id='Submit1' class='ui orange button tiny marginright testbutton challengebutton' type='submit' value='submit'>Submit</button></div></div>");
   
   
  } else {
     $('#Question1').remove();
     $('#Question2').remove();
     
    $('.Questions').append("<div class='newbox' id='Question2'><h2 style='text-align:left' >What you didn't like about the video?</h2><div class='optionWrapper'><input class='optionButton' type='radio'  name='radio'/><div class='option'>A. Very useful for interview preparation</div><input type='radio' class='optionButton' name='radio'/><div class='option'>B.  It clearly explains the concept</div><input type='radio' class='optionButton' name='radio'/><div class='option'>C. Animation is very good</div><input type='radio' class='optionButton' name='radio'/><div class='option'>D. Very easy to understand</div><button id='Submit2' class='ui orange button tiny marginright testbutton challengebutton' type='submit' value='submit'>Submit</button></div></div>");
    
  }
  $('#Submit1').on('click',  function (event) {
          /* stop form from submitting normally */
             ...