//spectrum graph 1 (function() { 'use strict'; var event = window.mheContpract.libs['event'].user; var ActiveGraph = function(section) { this.section = section; this.section.self = this; this.section.points_possible = 1; this.section.points_earned = 0; this.section.section_completed = false; this.circle = section.jq.find('.regulator_circle'); this.regulator_width = $('.wave_regulator .regulator_line').width() - this.circle.width(); this.regulator_height = $('.wave_regulator_vertical .regulator_line').height() - this.circle.height(); this.hueBox = section.jq.find('.hueBox'); this.rCol = section.jq.find('.rCol'); this.gCol = section.jq.find('.gCol'); this.bCol = section.jq.find('.bCol'); this.slider_img = section.jq[0].querySelector(".slider_img"); $(this.slider_img).attr({ 'tabindex': 0, 'role': 'slider', 'aria-orientation': 'horizontal', 'aria-valuemin': 400, 'aria-valuemax': 700, 'aria-valuenow': 400, 'aria-valuetext': '400 nanometers. The responsiveness of cones is: Blue – 68 %; Green – 0 %; Red – 0 %. The experienced hue is blue.', 'aria-label': 'Slider: Use the right and left arrows to change the frequency in nanometers, billionths of a meter. From 400 to approximately 470 the color is blue. From approximately 470 to 500 the color is deep blue. From approximately 500 to approximately 560 the color is green. From approximately 560 to approximately 600 the color is yellow. From approximately 600 to approximately 660 the color is orange. From approximately 660 to 700 the color is red.' }); this.horizontal_slider = section.jq[0].querySelector(".regulator_circle.horizontal"); section.jq.addClass('active_graph'); this.slider_application = section.jq.find('.slider_application'); this.slider_application.attr({ 'role': 'application', 'aria-label': 'Select the slider with the Tab key and use the right and left arrows to change the frequency. Each time, changing the frequency, you update the animated graph, representing the responsiveness of three types of cones: Blue – short wavelength cones; Green – medium wavelength cones; and Red – long-wavelength cones. Also, the experienced hue will change accordingly.' }); var self = this; this.offset = 0; var valuetext = ''; $(this.horizontal_slider).draggable({ containment: "parent", start: function() { }, drag: function(event, ui) { ui.position.left = Math.round(ui.position.left / player._scaleFactor); ui.position.left = ui.position.left >= self.regulator_width ? self.regulator_width : ui.position.left; self.circle.left = self.regulator_width - ui.position.left; var offset = Math.round((self.regulator_width - self.circle.left) / self.regulator_width * 100) / 100; var valueObj = calcColorValues(self, offset); self.offset = offset; valuetext = valueObj.value + ' nanometers. The responsiveness of cones is: Blue ' + valueObj.b + ' %; Green ' + valueObj.g + ' %; red ' + valueObj.r + ' %. The experienced hue is ' + valueObj.color; $(self.slider_img).attr('aria-valuenow', valueObj.value); $(self.slider_img).attr('aria-valuetext', valuetext); }, stop: function() { finishSlide.call(self); //self.liveRegion.text(valuetext); } }); this.slider_img.addEventListener('keydown', keyListener.bind(this)); var nameMC = this.section.jq.find('.movieclip').data('name'); this.mc = window.mheContpract.movieclips[nameMC]; // Add aria description addAriaElement.call(this); initLiveRegion.call(this); }; var initLiveRegion = function() { this.liveRegion = $('
'); this.slider_application.append(this.liveRegion); }; var calcColorValues = function(self, offset) { var r, g, b; var colorText = ''; switch (true) { case (offset < 0.11): r = 0x99; g = 0x00; b = 0xff; break; case (offset < 0.25): r = 0x99 * (1 - (offset * 100 - 11) / 14); g = 0x00; b = 0xff; break; case (offset < 0.41): r = 0x00; g = 0xcc * (offset * 100 - 25) / 16; b = 0xff * (1 - (offset * 100 - 25) / 16); break; case (offset < 0.58): r = 0xff * (offset * 100 - 41) / 17; g = 0xcc + 0x33 * (offset * 100 - 41) / 17; b = 0x00; break; case (offset < 0.80): r = 0xff; g = 0x66 + 0x99 * (1 - (offset * 100 - 58) / 22); b = 0x00; break; case (offset >= 0.80): r = 0xff; g = 0x66 * (1 - (offset * 100 - 80) / 20); b = 0x00; break; default: r = 0x99; g = 0x00; b = 0xff; break; } r = Math.round(r); g = Math.round(g); b = Math.round(b); var color = 'rgb(' + r + ',' + g + ',' + b + ')'; self.hueBox.css("background-color", color); if ( offset < 0.43 ) { r = 10; } else { if ( offset < 0.58 ) { r = 10 + 245 * (offset * 100 - 43) / 15; } else { if ( offset < 0.67 ) { r = 255; } else { r = 131 + 124 * (1 - (offset * 100 - 67) / 33) } } } if ( offset < 0.26 ) { g = 10; } else { if ( offset < 0.56 ) { g = 10 + 245 * (offset * 100 - 26) / 30; } else { if ( offset < 0.81 ) { g = 10 + 245 * (1 - (offset * 100 - 56) / 25); } else { g = 10; } } } if ( offset < 0.21 ) { b = 176 + 79 * (offset * 100) / 21; } else { if ( offset < 0.26 ) { b = 255; } else { if ( offset < 0.41 ) { b = 10 + 245 * (1 - (offset * 100 - 26) / 15); } else { b = 10; } } } self.rCol.css('height', r); self.gCol.css('height', g); self.bCol.css('height', b); var value = Math.round(400 + 300 * offset); switch (true) { case (value < 470): colorText = 'blue'; break; case (value < 500): colorText = 'deep blue'; break; case (value < 560): colorText = 'green'; break; case (value < 600): colorText = 'yellow'; break; case (value < 660): colorText = 'orange'; break; case (value >= 660): colorText = 'red'; break; default: colorText = 'blue'; break; } var valueObj = {value: value, r: Math.round((r - 10) / 245 * 100), g: Math.round((g - 10) / 245 * 100), b: Math.round((b - 10) / 245 * 100), color: colorText}; return valueObj; }; var keyListener = function(e) { if ( this.slider_img != document.activeElement ) { return; } e = e || window.event; if ( e.keyCode === 37 ) { if ( this.offset < 0.05 ) { this.offset = 0; } else { this.offset -= 0.05; } $(this.horizontal_slider).animate({ left: this.regulator_width * (this.offset) }); var valueObj = calcColorValues(this, this.offset); var valuetext = valueObj.value + ' nanometers. The responsiveness of cones is: Blue ' + valueObj.b + ' %; Green ' + valueObj.g + ' %; red ' + valueObj.r + ' %. The experienced hue is ' + valueObj.color; //$(this.slider_img).attr('aria-valuenow', valueObj.value); //$(this.slider_img).attr('aria-valuetext', valuetext); this.liveRegion.text(valuetext); finishSlide.call(this); e.preventDefault(); } if ( e.keyCode === 39 ) { if ( this.offset > 0.95 ) { this.offset = 1; } else { this.offset += 0.05; } $(this.horizontal_slider).animate({ left: this.regulator_width * (this.offset) }); var valueObj = calcColorValues(this, this.offset); var valuetext = valueObj.value + ' nanometers. The responsiveness of cones is: Blue ' + valueObj.b + ' %; Green ' + valueObj.g + ' %; red ' + valueObj.r + ' %. The experienced hue is ' + valueObj.color; //$(this.slider_img).attr('aria-valuenow', valueObj.value); //$(this.slider_img).attr('aria-valuetext', valuetext); this.liveRegion.text(valuetext); finishSlide.call(this); e.preventDefault(); } }; ActiveGraph.prototype.showSlide = function() { this.ariaReader.focus(); this.section.circle = []; this.offset = 0; $(this.horizontal_slider).animate({ left: 0 }); calcColorValues(this, 0); }; var addAriaElement = function() { var ariaLabel = this.section.title + '. ' + this.section.instructions; this.ariaReader = $(''); this.section.jq.prepend(this.ariaReader); }; 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 finishSlide = function() { this.section.points_earned = this.section.points_possible; this.section.section_completed = true; player.activity.grade_activity(); player.update_section_status(); }; window.mheContpract = window.mheContpract || {}; window.mheContpract['spectrum_graph_1'] = { initialize: function(section) { section.slide = new ActiveGraph(section); }, show: function(section) { section.slide.showSlide(); }, hide: function(section) { //stopLine(section); } }; })(); //spectrum graph + mc_test (function() { 'use strict'; var _ID = 0; var MCSlide = function(section) { var self = this; _ID++; this.attempt = 0; this.section = section; this.section.jq.addClass('mc_test'); this.section.points_possible = 1; this.section.points_earned = 0; this.section.section_completed = false; this.incorrect_feedback = this.section.jq.find('.incorrect_feedback').text() || 'Sorry. You did not answer the question correctly. Perhaps you should go back to review the activity.'; this.correct_feedback = this.section.jq.find('.correct_feedback').text() || 'Press the Next button and move forward.'; this.choiceItems = []; this.checkedItem = null; this.section.jq.find('.mc_question_text').attr('id', 'qu_' + _ID); this.section.jq.find('.mc_choice_item').each(function() { var $item = $(this).remove(); var item = { correct: $item.data('correct'), feedback: $item.data('feedback'), text: $item.text() }; self.choiceItems.push(item); }); createHtml.call(this); addButtons.call(this); disableButtons.call(this); addAriaElement.call(this); disableButtons.call(this); this.section.self = this; this.circle = section.jq.find('.regulator_circle'); this.regulator_width = $('.wave_regulator .regulator_line').width() - this.circle.width(); this.regulator_height = $('.wave_regulator_vertical .regulator_line').height() - this.circle.height(); this.hueBox = section.jq.find('.hueBox'); this.rCol = section.jq.find('.rCol'); this.gCol = section.jq.find('.gCol'); this.bCol = section.jq.find('.bCol'); this.hueBoxContainer = section.jq.find('.hueBoxContainer'); this.hueBoxContainer.hide(); this.hueBoxLabel = section.jq.find('.hueBoxLabel'); this.hueBoxLabel.hide(); this.slider_img = section.jq[0].querySelector(".slider_img"); $(this.slider_img).attr({ 'tabindex': 0, 'aria-labelledby': 'qu_', 'role': 'slider', 'aria-valuemin': 400, 'aria-valuemax': 700, 'aria-valuenow': 530, 'aria-valuetext': '530 nanometers', 'aria-label': 'Slider: Use the right and left arrows to change the frequency in nanometers, billionths of a meter.' }); this.shield = section.jq.find(".shield"); this.horizontal_slider = section.jq[0].querySelector(".regulator_circle.horizontal"); //section.jq.addClass('active_graph'); var self = this; this.offset = 0.43; calcColorValues(this, 0.43); var valuetext = ''; this.isAnswered = false; $(this.horizontal_slider).draggable({ containment: "parent", start: function() { }, drag: function(event, ui) { ui.position.left = Math.round(ui.position.left / player._scaleFactor); ui.position.left = ui.position.left >= self.regulator_width ? self.regulator_width : ui.position.left; self.circle.left = self.regulator_width - ui.position.left; var offset = Math.round((self.regulator_width - self.circle.left) / self.regulator_width * 100) / 100; var valueObj = calcColorValues(self, offset); self.offset = offset; valuetext = valueObj.value + ' nanometers. The responsiveness of cones is: Blue ' + valueObj.b + ' %; Green ' + valueObj.g + ' %; red ' + valueObj.r + ' %. '; if ( self.isAnswered ) { valuetext += 'The experienced hue is ' + valueObj.color; } $(self.slider_img).attr('aria-valuenow', valueObj.value); $(self.slider_img).attr('aria-valuetext', valuetext); }, stop: function() { finishSlide.call(self); } }); this.slider_img.addEventListener('keydown', keyListener.bind(this)); this.slider_application = section.jq.find('.slider_application'); this.slider_application.attr({ 'role': 'application', 'aria-label': 'Select the slider with the Tab key and use the right and left arrows to change the frequency. Each time, changing the frequency, you update the animated graph, representing the responsiveness of three types of cones: Blue – short wavelength cones; Green – medium wavelength cones; and Red – long-wavelength cones. ' }); initLiveRegion.call(this); }; var initLiveRegion = function() { this.liveRegion = $(''); this.slider_application.append(this.liveRegion); }; var createHtml = function() { var $container = this.section.jq.find('.mc_choice_items'); $container.attr({ 'role': 'radiogroup', 'aria-labelledby': 'qu_' + _ID }); for (var i = 0; i < this.choiceItems.length; i++) { var item = this.choiceItems[i]; var id = 'item_' + _ID + '_' + i; var text = item.text; var $input = $(''); var $label = $(''); $container.append($input, $label); item.jq = $input; $input.bind('change', selectItem.bind(this, item)) } }; var disableItems = function() { for (var i = 0; i < this.choiceItems.length; i++) { this.choiceItems[i].jq.attr('disabled', 'disabled'); } }; var addAriaElement = function() { var ariaLabel = this.section.title + '. ' + this.section.instructions; this.ariaReader = $(''); this.section.jq.prepend(this.ariaReader); }; var addButtons = function() { this.btnCheck = $(''); this.btnCheck.bind('click', checkAnswer.bind(this)); this.section.jq.find('.mc_slide').append(this.btnCheck); }; var disableButtons = function() { this.btnCheck.attr('disabled', 'disabled'); }; var checkAnswer = function() { var self = this; var feedback; // Disabled button submit disableButtons.call(this); var className = this.checkedItem.correct ? 'correct' : 'incorrect'; this.checkedItem.jq.addClass(className); if ( this.checkedItem.correct ) { feedback = this.checkedItem.feedback || this.correct_feedback; this.offset = 0.23; $(this.horizontal_slider).animate({ left: this.regulator_width * (0.23) }); this.isAnswered = true; var valueObj = calcColorValues(this, 0.23); var valuetext = valueObj.value + ' nanometers. The responsiveness of cones is: Blue ' + valueObj.b + ' %; Green ' + valueObj.g + ' %; red ' + valueObj.r + ' %. The experienced hue is ' + valueObj.color; //this.liveRegion.text(valuetext); calcColorValues(this, 0.23); this.hueBoxContainer.show(); this.hueBoxLabel.show(); this.shield.hide(); disableItems.call(this); finishSlide.call(this); document.querySelector('.navigation_button.next_button').focus(); Standard_Dialog.open(feedback, { title: 'Correct!', buttons: [ { text: "OK", click: function() { Standard_Dialog.close(); self.liveRegion.text(valuetext); $(self.slider_img).attr({ 'aria-label': 'Use the right and left arrows to change the frequency in nanometers, billionths of a meter. From 400 to approximately 470 the color is blue. From approximately 470 to 500 the color is deep blue. From approximately 500 to approximately 560 the color is green. From approximately 560 to approximately 600 the color is yellow. From approximately 600 to approximately 660 the color is orange. From approximately 660 to 700 the color is red.' }); } } ] }, 'correct'); } else { feedback = this.checkedItem.feedback || this.incorrect_feedback; Standard_Dialog.open(feedback, { title: 'Incorrect!', buttons: [ { text: "OK", click: function() { Standard_Dialog.close(); reset.call(self); self.attempt++; self.section.jq.find('.mc_choice_items').focus(); } } ] }, 'incorrect'); } }; var reset = function() { this.checkedItem.jq.removeClass('incorrect'); this.checkedItem.jq.attr('checked', ''); this.checkedItem = null; }; var selectItem = function(item) { this.checkedItem = item; this.checkedItem.jq.attr('checked', 'checked'); this.btnCheck.attr('disabled', ''); }; var finishSlide = function() { this.section.points_earned = this.section.points_possible; this.section.section_completed = true; player.activity.grade_activity(); player.update_section_status(); }; var calcColorValues = function(self, offset) { var r, g, b; var colorText = ''; switch (true) { case (offset < 0.11): r = 0x99; g = 0x00; b = 0xff; break; case (offset < 0.25): r = 0x99 * (1 - (offset * 100 - 11) / 14); g = 0x00; b = 0xff; break; case (offset < 0.41): r = 0x00; g = 0xcc * (offset * 100 - 25) / 16; b = 0xff * (1 - (offset * 100 - 25) / 16); break; case (offset < 0.58): r = 0xff * (offset * 100 - 41) / 17; g = 0xcc + 0x33 * (offset * 100 - 41) / 17; b = 0x00; break; case (offset < 0.80): r = 0xff; g = 0x66 + 0x99 * (1 - (offset * 100 - 58) / 22); b = 0x00; break; case (offset >= 0.80): r = 0xff; g = 0x66 * (1 - (offset * 100 - 80) / 20); b = 0x00; break; default: r = 0x99; g = 0x00; b = 0xff; break; } r = Math.round(r); g = Math.round(g); b = Math.round(b); var color = 'rgb(' + r + ',' + g + ',' + b + ')'; self.hueBox.css("background-color", color); if ( offset < 0.43 ) { r = 10; } else { if ( offset < 0.58 ) { r = 10 + 245 * (offset * 100 - 43) / 15; } else { if ( offset < 0.67 ) { r = 255; } else { r = 131 + 124 * (1 - (offset * 100 - 67) / 33) } } } if ( offset < 0.26 ) { g = 10; } else { if ( offset < 0.56 ) { g = 10 + 245 * (offset * 100 - 26) / 30; } else { if ( offset < 0.81 ) { g = 10 + 245 * (1 - (offset * 100 - 56) / 25); } else { g = 10; } } } if ( offset < 0.21 ) { b = 176 + 79 * (offset * 100) / 21; } else { if ( offset < 0.26 ) { b = 255; } else { if ( offset < 0.41 ) { b = 10 + 245 * (1 - (offset * 100 - 26) / 15); } else { b = 10; } } } self.rCol.css('height', r); self.gCol.css('height', g); self.bCol.css('height', b); var value = Math.round(400 + 300 * offset); switch (true) { case (value < 470): colorText = 'blue'; break; case (value < 500): colorText = 'deep blue'; break; case (value < 560): colorText = 'green'; break; case (value < 600): colorText = 'yellow'; break; case (value < 660): colorText = 'orange'; break; case (value >= 660): colorText = 'red'; break; default: colorText = 'blue'; break; } var valueObj = {value: value, r: Math.round((r - 10) / 245 * 100), g: Math.round((g - 10) / 245 * 100), b: Math.round((b - 10) / 245 * 100), color: colorText}; return valueObj; }; var keyListener = function(e) { if ( this.slider_img != document.activeElement ) { return; } e = e || window.event; if ( e.keyCode === 37 ) { if ( this.offset < 0.05 ) { this.offset = 0; } else { this.offset -= 0.05; } $(this.horizontal_slider).animate({ left: this.regulator_width * (this.offset) }); var valueObj = calcColorValues(this, this.offset); var valuetext = valueObj.value + ' nanometers. The responsiveness of cones is: Blue ' + valueObj.b + ' %; Green ' + valueObj.g + ' %; red ' + valueObj.r + ' %.'; if ( this.isAnswered ) { valuetext += 'The experienced hue is ' + valueObj.color; } this.liveRegion.text(valuetext); // finishSlide.call(this); e.preventDefault(); } if ( e.keyCode === 39 ) { if ( this.offset > 0.95 ) { this.offset = 1; } else { this.offset += 0.05; } $(this.horizontal_slider).animate({ left: this.regulator_width * (this.offset) }); var valueObj = calcColorValues(this, this.offset); var valuetext = valueObj.value + ' nanometers. The responsiveness of cones is: Blue ' + valueObj.b + ' %; Green ' + valueObj.g + ' %; red ' + valueObj.r + ' %.'; if ( this.isAnswered ) { valuetext += 'The experienced hue is ' + valueObj.color; } this.liveRegion.text(valuetext); // finishSlide.call(this); e.preventDefault(); } }; MCSlide.prototype.showSlide = function() { this.ariaReader.focus(); this.section.circle = []; this.offset = 0.43; $(this.horizontal_slider).animate({ left: this.regulator_width * (0.43) }); calcColorValues(this, 0.43); }; var slide; window.mheContpract = window.mheContpract || {}; window.mheContpract['spectrum_test1'] = { initialize: function(section) { slide = new MCSlide(section); }, show: function() { slide.showSlide(); } }; })(); //spectrum test (function() { 'use strict'; var _ID = 0; var MCSlide = function(section) { var self = this; _ID++; this.attempt = 0; this.section = section; this.section.jq.addClass('mc_test'); this.section.points_possible = 1; this.section.points_earned = 0; this.section.section_completed = false; this.incorrect_feedback = this.section.jq.find('.incorrect_feedback').text() || 'Sorry. You did not answer the question correctly. Perhaps you should go back to review the activity.'; this.correct_feedback = this.section.jq.find('.correct_feedback').text() || 'Press the Next button and move forward.'; this.choiceItems = []; this.checkedItem = null; addButtons.call(this); disableButtons.call(this); addAriaElement.call(this); disableButtons.call(this); this.section.self = this; this.circle = section.jq.find('.regulator_circle'); this.regulator_width = $('.wave_regulator .regulator_line').width() - this.circle.width(); this.regulator_height = $('.wave_regulator_vertical .regulator_line').height() - this.circle.height(); this.hueBox = section.jq.find('.hueBox'); this.rCol = section.jq.find('.rCol'); this.gCol = section.jq.find('.gCol'); this.bCol = section.jq.find('.bCol'); this.hueBoxContainer = section.jq.find('.hueBoxContainer'); this.hueBoxContainer.hide(); this.hueBoxLabel = section.jq.find('.hueBoxLabel'); this.hueBoxLabel.hide(); this.slider_img = section.jq[0].querySelector(".slider_img"); $(this.slider_img).attr({ 'tabindex': 0, 'aria-labelledby': 'qu_', 'role': 'slider', 'aria-valuemin': 400, 'aria-valuemax': 700, 'aria-valuenow': 400, 'aria-valuetext': '400 nanometers', 'aria-label': 'Slider: Use the right and left arrows to change the frequency in nanometers, billionths of a meter.' }); this.shield = section.jq.find(".shield"); this.horizontal_slider = section.jq[0].querySelector(".regulator_circle.horizontal"); //section.jq.addClass('active_graph'); var self = this; this.offset = 0.1; calcColorValues(this, 0.1); var valuetext = ''; this.isAnswered = false; $(this.horizontal_slider).draggable({ containment: "parent", start: function() { }, drag: function(event, ui) { ui.position.left = Math.round(ui.position.left / player._scaleFactor); ui.position.left = ui.position.left >= self.regulator_width ? self.regulator_width : ui.position.left; self.circle.left = self.regulator_width - ui.position.left; var offset = Math.round((self.regulator_width - self.circle.left) / self.regulator_width * 100) / 100; var valueObj = calcColorValues(self, offset); self.offset = offset; valuetext = valueObj.value + ' nanometers. The responsiveness of cones is: Blue ' + valueObj.b + ' %; Green ' + valueObj.g + ' %; red ' + valueObj.r + ' %. '; if ( self.isAnswered ) { valuetext += 'The experienced hue is ' + valueObj.color; } $(self.slider_img).attr('aria-valuenow', valueObj.value); $(self.slider_img).attr('aria-valuetext', valuetext); }, stop: function() { self.btnCheck.attr('disabled', ''); //finishSlide.call(self); } }); this.slider_img.addEventListener('keydown', keyListener.bind(this)); this.slider_application = section.jq.find('.slider_application'); this.slider_application.attr({ 'role': 'application', 'aria-label': 'Select the slider with the Tab key and use the right and left arrows to change the frequency. Each time, changing the frequency, you update the animated graph, representing the responsiveness of three types of cones: Blue – short wavelength cones; Green – medium wavelength cones; and Red – long-wavelength cones. ' }); initLiveRegion.call(this); }; var initLiveRegion = function() { this.liveRegion = $(''); this.slider_application.append(this.liveRegion); }; var disableItems = function() { for (var i = 0; i < this.choiceItems.length; i++) { this.choiceItems[i].jq.attr('disabled', 'disabled'); } }; var addAriaElement = function() { var ariaLabel = this.section.title + '. When three things occur together - the short-wavelength cones are quiet, the long-wavelength cones are very active, and the medium-wavelength cones are slightly less active - we see yellow. ' + this.section.instructions + ' If your answer is correct you will hear a value of experienced hue and will be able to keep updating it using the slider.'; this.ariaReader = $(''); this.section.jq.prepend(this.ariaReader); }; var addButtons = function() { this.btnCheck = $(''); this.btnCheck.bind('click', checkAnswer.bind(this)); this.section.jq.find('.mc_slide').append(this.btnCheck); }; var disableButtons = function() { this.btnCheck.attr('disabled', 'disabled'); }; var checkAnswer = function() { var self = this; var feedback; // Disabled button submit disableButtons.call(this); if ( this.offset > 0.57 && this.offset < 0.62 ) { feedback = this.correct_feedback; this.hueBoxContainer.show(); this.hueBoxLabel.show(); this.shield.hide(); disableItems.call(this); finishSlide.call(this); document.querySelector('.navigation_button.next_button').focus(); this.isAnswered = true; var valueObj = calcColorValues(this, this.offset); var valuetext = valueObj.value + ' nanometers. The responsiveness of cones is: Blue ' + valueObj.b + ' %; Green ' + valueObj.g + ' %; red ' + valueObj.r + ' %. The experienced hue is ' + valueObj.color; Standard_Dialog.open(feedback, { title: 'Correct!', buttons: [ { text: "OK", click: function() { Standard_Dialog.close(); self.liveRegion.text(valuetext); $(self.slider_img).attr({ 'aria-label': 'Use the right and left arrows to change the frequency in nanometers, billionths of a meter. From 400 to approximately 470 the color is blue. From approximately 470 to 500 the color is deep blue. From approximately 500 to approximately 560 the color is green. From approximately 560 to approximately 600 the color is yellow. From approximately 600 to approximately 660 the color is orange. From approximately 660 to 700 the color is red.' }); } } ] }, 'correct'); } else { feedback = this.incorrect_feedback; Standard_Dialog.open(feedback, { title: 'Incorrect!', buttons: [ { text: "OK", click: function() { Standard_Dialog.close(); reset.call(self); self.attempt++; self.section.jq.find('.mc_question_text').focus(); } } ] }, 'incorrect'); } }; var reset = function() { this.checkedItem.jq.removeClass('incorrect'); this.checkedItem.jq.attr('checked', ''); this.checkedItem = null; }; var selectItem = function(item) { this.checkedItem = item; this.checkedItem.jq.attr('checked', 'checked'); this.btnCheck.attr('disabled', ''); }; var finishSlide = function() { this.section.points_earned = this.section.points_possible; this.section.section_completed = true; player.activity.grade_activity(); player.update_section_status(); }; var calcColorValues = function(self, offset) { var r, g, b; var colorText = ''; switch (true) { case (offset < 0.11): r = 0x99; g = 0x00; b = 0xff; break; case (offset < 0.25): r = 0x99 * (1 - (offset * 100 - 11) / 14); g = 0x00; b = 0xff; break; case (offset < 0.41): r = 0x00; g = 0xcc * (offset * 100 - 25) / 16; b = 0xff * (1 - (offset * 100 - 25) / 16); break; case (offset < 0.58): r = 0xff * (offset * 100 - 41) / 17; g = 0xcc + 0x33 * (offset * 100 - 41) / 17; b = 0x00; break; case (offset < 0.80): r = 0xff; g = 0x66 + 0x99 * (1 - (offset * 100 - 58) / 22); b = 0x00; break; case (offset >= 0.80): r = 0xff; g = 0x66 * (1 - (offset * 100 - 80) / 20); b = 0x00; break; default: r = 0x99; g = 0x00; b = 0xff; break; } r = Math.round(r); g = Math.round(g); b = Math.round(b); var color = 'rgb(' + r + ',' + g + ',' + b + ')'; self.hueBox.css("background-color", color); if ( offset < 0.43 ) { r = 10; } else { if ( offset < 0.58 ) { r = 10 + 245 * (offset * 100 - 43) / 15; } else { if ( offset < 0.67 ) { r = 255; } else { r = 131 + 124 * (1 - (offset * 100 - 67) / 33) } } } if ( offset < 0.26 ) { g = 10; } else { if ( offset < 0.56 ) { g = 10 + 245 * (offset * 100 - 26) / 30; } else { if ( offset < 0.81 ) { g = 10 + 245 * (1 - (offset * 100 - 56) / 25); } else { g = 10; } } } if ( offset < 0.21 ) { b = 176 + 79 * (offset * 100) / 21; } else { if ( offset < 0.26 ) { b = 255; } else { if ( offset < 0.41 ) { b = 10 + 245 * (1 - (offset * 100 - 26) / 15); } else { b = 10; } } } self.rCol.css('height', r); self.gCol.css('height', g); self.bCol.css('height', b); var value = Math.round(400 + 300 * offset); switch (true) { case (value < 470): colorText = 'blue'; break; case (value < 500): colorText = 'deep blue'; break; case (value < 560): colorText = 'green'; break; case (value < 600): colorText = 'yellow'; break; case (value < 660): colorText = 'orange'; break; case (value >= 660): colorText = 'red'; break; default: colorText = 'blue'; break; } var valueObj = {value: value, r: Math.round((r - 10) / 245 * 100), g: Math.round((g - 10) / 245 * 100), b: Math.round((b - 10) / 245 * 100), color: colorText}; return valueObj; }; var keyListener = function(e) { if ( this.slider_img != document.activeElement ) { return; } e = e || window.event; if ( e.keyCode === 37 ) { if ( this.offset < 0.05 ) { this.offset = 0; } else { this.offset -= 0.05; } $(this.horizontal_slider).animate({ left: this.regulator_width * (this.offset) }); var valueObj = calcColorValues(this, this.offset); var valuetext = valueObj.value + ' nanometers. The responsiveness of cones is: Blue ' + valueObj.b + ' %; Green ' + valueObj.g + ' %; red ' + valueObj.r + ' %.'; if ( this.isAnswered ) { valuetext += 'The experienced hue is ' + valueObj.color; } this.liveRegion.text(valuetext); this.btnCheck.attr('disabled', ''); e.preventDefault(); } if ( e.keyCode === 39 ) { if ( this.offset > 0.95 ) { this.offset = 1; } else { this.offset += 0.05; } $(this.horizontal_slider).animate({ left: this.regulator_width * (this.offset) }); calcColorValues(this, this.offset); var valueObj = calcColorValues(this, this.offset); var valuetext = valueObj.value + ' nanometers. The responsiveness of cones is: Blue ' + valueObj.b + ' %; Green ' + valueObj.g + ' %; red ' + valueObj.r + ' %.'; if ( this.isAnswered ) { valuetext += 'The experienced hue is ' + valueObj.color; } this.liveRegion.text(valuetext); this.btnCheck.attr('disabled', ''); e.preventDefault(); } }; MCSlide.prototype.showSlide = function() { this.ariaReader.focus(); this.section.circle = []; this.offset = 0.1; $(this.horizontal_slider).animate({ left: this.regulator_width * (0.1) }); calcColorValues(this, 0.1); }; var slide; window.mheContpract = window.mheContpract || {}; window.mheContpract['spectrum_test2'] = { initialize: function(section) { slide = new MCSlide(section); }, show: function() { slide.showSlide(); } }; })();