jQuery addClass example

Change class name on click in jQuery

by Kajus

HTML

<link rel="stylesheet" href="https://vjs.zencdn.net/7.4.1/video-js.css">
<script src="https://vjs.zencdn.net/7.4.1/video.js"></script>
<div id="main-container">

  <div id="overlays-wrap">

    <div class="overlay-item" data-overlayid="59" data-time="41">
      <p class="vo-question">
        Welche Zahl ist die Summe bei 3 + 50 = 53?
      </p>

      <div class="vtask-choices-wrap">

        <div class="vtask-choice-item">
          <input class="vtask-choice" type="radio" name="quiz" id="59-a1" value="1" data-correct="0">
          <label class="radio-tile" for="59-a1">
            <span class="radio-tile-label">
              3
            </span>
          </label>
        </div>

        <div class="vtask-choice-item">
          <input class="vtask-choice" type="radio" name="quiz" id="59-a2" data-correct="0">
          <label class="radio-tile" for="59-a2">
            <span class="radio-tile-label">
              50
            </span>
          </label>
        </div>

        <div class="vtask-choice-item">
          <input class="vtask-choice" type="radio" name="quiz" id="59-a3" value="3" data-correct="1"> 
          <label class="radio-tile" for="59-a3">
            <span class="radio-tile-label">
              53
            </span>
          </label>
        </div>


      </div> <!-- vtask-choices-wrap -->

      <a class="buttonb vtask-btn-continue">Continue</a>

    </div> <!-- overlay-item -->

  </div>


  <div id="videowrapper">
    <video id="videoplay" class="video-js vjs-default-skin" controls preload="metadata" width="854" height="480" poster="" autoplay="true">
      <source src="http://vjs.zencdn.net/v/oceans.mp4" type="video/mp4"> 
    </video>
  </div>


</div>

CSS

#overlays-wrap {
  position: absolute;
  width: 100%;
  height: 100%;
  max-height:460px;
  left: 0;
  top: 0;
  z-index: 2147483647;
}

.overlay-item {
  position: absolute;
  top: 0;
  color: #FFF;
  font-size: 20px;
  background-color: rgba(0, 0, 0, 0.85);
  width: 100%;
  height: 100%;
  padding: 0;
  z-index: 2147483647;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  backface-visibility: hidden;
}

.overlay-item .vo-question {
  margin: 10px 0 40px 0;
  width: 80%;
  text-align: center;
  line-height: 1.5;
}

.vtask-choices-wrap {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-evenly;
  width: 100%;
  max-width: 1000px;
  min-height: 10rem;
}

.vtask-choice-item .vtask-choice {
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
}

.radio-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  border: 2px solid #079ad9;
  border-radius: 5px;
  padding: 1rem;
  transition: transform 300ms ease;
  background: rgba(0,0,0,0.5);
  z-index: 500;
  cursor: pointer;
  font-size: 18px;
  text-align: center;
}

.vtask-btn-continue {
  color: #FFFFFF!important;
  border-color: #2B78C5;
  border-bottom-color: #2a65a0;
  text-decoration: none;
  text-shadow: none;
  color: #FFF;
  background: #39F;
  margin-top: 40px;
  padding: 10px 20px;
  font-family: Arial,sans-serif;
  font-size: 16px;
}


/* FIX according https://stackoverflow.com/a/13388579/1066234 */
#videoplay {
  position: absolute;
  left: 0px;
  top: 0px;
  min-height: 100%;
  min-width: 100%;
  z-index: 9997;
}
#overlays-wrap {
  position: absolute;
  left: 0px;
  top: 0px;
  height: 100%;
  width: 100%;
  z-index: 9998;
}

#main_container {
  float: left;
  position: relative;
  left:0;
  top:0;
}

JavaScript

$(document).ready(function()
                  {

  var options = {
    playbackRates: [1, 1.5, 2],
    muted: true,
  };

  video = videojs('videoplay', options);

  video.ready(function() 
              {

    /*
		this.on('fullscreenchange',function() {
			console.log('fullscreen event');
		});
		*/
  }); // end video.ready 


  // OVERLAY PREPARE
  // $('#overlays-wrap, .overlay-item').hide();

  // OVERLAY INTERACTION
  $('.radio-tile').click( function() {
    // only show if not yet submitted, prevents submit then click again on radio-tile which would show the vtask-btn-continue
    var submitted = $(this).closest('.overlay-item').hasClass('overlay-submitted');
    if(!submitted)
    {
      $(this).parent().parent().next('.vtask-btn-continue').css('visibility', 'visible');
      // make sure we check the radio button 
      $(this).prev('.vtask-choice').prop('checked', true);
    }
  });

  $('.vtask-btn-continue').click( function() {
    // hide continue button
    $(this).css('visibility', 'hidden');

    var overlay = $(this).closest('.overlay-item'); // $(this).parent()
    overlay.hide();

  });

}); // END ready