(function() { 'use strict'; var event = window.mheContpract.libs['event'].user; var CHANGE_MESSAGE = "The page description has changed."; var DESCRIPTIONS = [ 'When the "test the light" button is selected the red light bulb turns on and then off. No saliva is observed in the straw.', 'The image of the man has changed. There is no longer a red light. Instead, there is a lemon with a straw attached to it above the man\'s head. The straw reaches down onto the man\'s tongue. There is still a straw going from under the man\'s tongue to a cup. When the "test the juice" button is selected, the lemon is squeezed and a drop of juice flows down the straw and onto the man\'s tongue. Immediately a drop of saliva flows from under the man\'s tongue and down the straw to the cup.', 'The image includes the red light bulb, lemon with a straw to the man\'s tongue, and a straw underneath the man\'s tongue to a cup. When the "start the trials" button is selected the red light bulb turns on and then off. Then, the lemon is squeezed and a drop of juice flows down the straw and onto the man\'s tongue. Immediately a drop of saliva flows from under the man\'s tongue and down the straw to the cup. This happens three times before a "continue the trials" button appears. When the "continue the trials" button is selected, the red light bulb turns on and then off. Then the lemon is squeezed. A drop of lemon juice flows down the straw and onto the man\'s tongue. Immediately a drop of saliva flows from under the man\'s tongue and down the straw to the cup. As the trials continue, the drop of saliva starts to flow at the same time the drop of lemon juice gets to the tongue. By the end of the trials the drop of saliva starts to flow right before the drop of lemon juice gets to the tongue.', 'The image of the man has the red light bulb and a straw under his tongue leading to the cup. When the "test the light" button is selected, the red light bulb turns on and then off. Immediately a drop of saliva flows down the straw under the man\'s tongue to the cup.' ]; var ReviewSlide = function(section) { this.section = section; this.section.points_possible = 1; this.section.points_earned = 0; this.section.section_completed = false; section.jq.addClass('review_task'); this.steps = section.jq[0].querySelectorAll('.text'); this.answers = section.jq[0].querySelectorAll('.answer'); this.inst = section.jq[0].querySelector('.inst'); this.liveRegion = section.jq[0].querySelector(".live_region"); this.currentStep = 0; this.buttons = []; this.ansButtons = []; this.reviewedSteps = []; var nameMC = this.section.jq.find('.movieclip').data('name'); this.mc = window.mheContpract.movieclips[nameMC]; // Add aria description hideSteps.call( this ); hideAnswers.call( this ); addAriaElement.call( this ); addAnswerBtns.call( this ); addStepsBtns.call( this ); }; var hideSteps = function(){ for( var i = 0; i < this.steps.length; i++ ){ this.steps[i].style.display = "none"; } }; var addAriaElement = function() { var ariaLabel = this.section.title + '.'; this.ariaReader = $('
'); this.section.jq.prepend(this.ariaReader); }; var addStepsBtns = function() { var $button; var btnNames = ['Step 1', 'Step 2', 'Step 3', 'Step 4']; var self = this; var container = this.section.jq.find('.review_buttons'); btnNames.forEach(function(title, i) { $button = $(''); $button.bind('click', showStep.bind( self, i ) ); container.append($button); self.buttons.push($button); }); // Show first step showStep.call( this, 0 ); this.buttons[this.buttons.length - 1].bind('keydown', preventTab); }; var preventTab = function(e) { e = e || window.event; if ( !e.shiftKey && e.keyCode === 9 ) { // !Shift + Tab key e.preventDefault(); document.querySelector('.navigation_button.next_button').focus(); } }; var addAnswerBtns = function() { var $button; var buttons = [ { name: 'TEST THE LIGHT', movie: 0 }, { name: 'TEST THE JUICE', movie: 1 }, { name: 'START THE TRIALS', movie: 2 }, { name: 'CONTINUE THE TRIALS', movie: 2 }, { name: 'TEST THE LIGHT', movie: 3 } ]; var self = this; buttons.forEach(function(button, i) { $button = $(''); $button.bind('click', testButtonsPlay.bind( self, button.movie, i)); if ( i === 3 ) { $button.hide(); } self.ansButtons.push($button); $(self.answers[i]).before($button); }); }; var testButtonsPlay = function(i, n) { hideAnswers.call(this); var mc = this.mc.root['step' + (i + 1)]; if ( mc.isPlayable ) {return} if ( n === 2 || n === 3 ) { this.ansButtons[n].hide(); } if ( n === 2 ) { this.inst.style.display = 'none'; } mc.onStop = function() { this.answers[n].style.display = ''; if ( this.reviewedSteps.indexOf(n) === -1 ) { this.reviewedSteps.push(n) } if ( this.reviewedSteps.length === 5 ) { finishSlide.call(this); } if ( n === 2 ) { this.ansButtons[3].show(); } }.bind(this); mc.play(); this.liveRegion.innerHTML = "" + DESCRIPTIONS[i] + "
"; }; var stopMC = function(i) { var mc = this.mc.root['step' + (i + 1)]; mc.onStop = function() {}; mc.gotoAndStop(0); }; var hideAnswers = function() { for (var i = 0; i < this.answers.length; i++) { this.answers[i].style.display = 'none'; } }; var showStep = function(i) { hideStep.call(this, this.currentStep); if( i !== this.currentStep ){ this.liveRegion.innerHTML = "" + CHANGE_MESSAGE + "
"; } this.currentStep = i; this.buttons[i].addClass('selected'); this.steps[i].style.display = ''; hideAnswers.call(this); this.mc.root.gotoAndStop(this.mc.root.labels['step' + (i + 1)]); this.ansButtons[2].show(); this.inst.style.display = ''; this.ansButtons[3].hide(); }; var hideStep = function(i) { stopMC.call( this, i ); $( this.buttons[i] ).removeClass('selected'); this.steps[i].style.display = 'none'; }; var finishSlide = function() { this.section.points_earned = this.section.points_possible; this.section.section_completed = true; player.activity.grade_activity(); player.update_section_status(); }; ReviewSlide.prototype.showSlide = function() { this.ariaReader.focus(); }; window.mheContpract = window.mheContpract || {}; window.mheContpract['review_task'] = { initialize: function(section) { section.slide = new ReviewSlide(section); }, show: function(section) { section.slide.showSlide(); } }; })();