Fix element naming convention

lms/static/coffee/spec/modules/problem_spec.coffee

@@ -20,7 +20,7 @@ describe 'Problem', ->
       @problem = new Problem 1, '/problem/url/'
 
     it 'set the element', ->
-      expect(@problem.element).toBe '#problem_1'
+      expect(@problem.el).toBe '#problem_1'
 
   describe 'bind', ->
     beforeEach ->
@@ -69,7 +69,7 @@ describe 'Problem', ->
         @problem.render 'Hello World'
 
       it 'render the content', ->
-        expect(@problem.element.html()).toEqual 'Hello World'
+        expect(@problem.el.html()).toEqual 'Hello World'
 
       it 're-bind the content', ->
         expect(@problem.bind).toHaveBeenCalled()
@@ -81,7 +81,7 @@ describe 'Problem', ->
         @problem.render()
 
       it 'load the content via ajax', ->
-        expect(@problem.element.html()).toEqual 'Hello World'
+        expect(@problem.el.html()).toEqual 'Hello World'
 
       it 're-bind the content', ->
         expect(@problem.bind).toHaveBeenCalled()
@@ -104,13 +104,13 @@ describe 'Problem', ->
       it 'call render with returned content', ->
         spyOn($, 'postWithPrefix').andCallFake (url, answers, callback) -> callback(success: 'correct', contents: 'Correct!')
         @problem.check()
-        expect(@problem.element.html()).toEqual 'Correct!'
+        expect(@problem.el.html()).toEqual 'Correct!'
 
     describe 'when the response is incorrect', ->
       it 'call render with returned content', ->
         spyOn($, 'postWithPrefix').andCallFake (url, answers, callback) -> callback(success: 'incorrect', contents: 'Correct!')
         @problem.check()
-        expect(@problem.element.html()).toEqual 'Correct!'
+        expect(@problem.el.html()).toEqual 'Correct!'
 
     describe 'when the response is undetermined', ->
       it 'alert the response', ->
@@ -137,16 +137,16 @@ describe 'Problem', ->
       spyOn($, 'postWithPrefix').andCallFake (url, answers, callback) ->
         callback html: "Reset!"
       @problem.reset()
-      expect(@problem.element.html()).toEqual 'Reset!'
+      expect(@problem.el.html()).toEqual 'Reset!'
 
   describe 'show', ->
     beforeEach ->
       @problem = new Problem 1, '/problem/url/'
-      @problem.element.prepend '<div id="answer_1_1" /><div id="answer_1_2" />'
+      @problem.el.prepend '<div id="answer_1_1" /><div id="answer_1_2" />'
 
     describe 'when the answer has not yet shown', ->
       beforeEach ->
-        @problem.element.removeClass 'showed'
+        @problem.el.removeClass 'showed'
 
       it 'log the problem_show event', ->
         @problem.show()
@@ -172,11 +172,11 @@ describe 'Problem', ->
       it 'add the showed class to element', ->
         spyOn($, 'postWithPrefix').andCallFake (url, callback) -> callback(answers: {})
         @problem.show()
-        expect(@problem.element).toHaveClass 'showed'
+        expect(@problem.el).toHaveClass 'showed'
 
       describe 'multiple choice question', ->
         beforeEach ->
-          @problem.element.prepend '''
+          @problem.el.prepend '''
             <label for="input_1_1_1"><input type="checkbox" name="input_1_1" id="input_1_1_1" value="1"> One</label>
             <label for="input_1_1_2"><input type="checkbox" name="input_1_1" id="input_1_1_2" value="2"> Two</label>
             <label for="input_1_1_3"><input type="checkbox" name="input_1_1" id="input_1_1_3" value="3"> Three</label>
@@ -194,8 +194,8 @@ describe 'Problem', ->
 
     describe 'when the answers are alreay shown', ->
       beforeEach ->
-        @problem.element.addClass 'showed'
-        @problem.element.prepend '''
+        @problem.el.addClass 'showed'
+        @problem.el.prepend '''
           <label for="input_1_1_1" correct_answer="true">
             <input type="checkbox" name="input_1_1" id="input_1_1_1" value="1" />
             One
@@ -216,7 +216,7 @@ describe 'Problem', ->
 
       it 'remove the showed class from element', ->
         @problem.show()
-        expect(@problem.element).not.toHaveClass 'showed'
+        expect(@problem.el).not.toHaveClass 'showed'
 
   describe 'save', ->
     beforeEach ->
@@ -271,7 +271,7 @@ describe 'Problem', ->
   describe 'refreshAnswers', ->
     beforeEach ->
       @problem = new Problem 1, '/problem/url/'
-      @problem.element.html '''
+      @problem.el.html '''
         <textarea class="CodeMirror" />
         <input id="input_1_1" name="input_1_1" class="schematic" value="one" />
         <input id="input_1_2" name="input_1_2" value="two" />

lms/static/coffee/spec/modules/sequence_spec.coffee

@@ -12,7 +12,7 @@ describe 'Sequence', ->
       @sequence = new Sequence '1', @items, 'sequence', 1
 
     it 'set the element', ->
-      expect(@sequence.element).toEqual $('#sequence_1')
+      expect(@sequence.el).toEqual $('#sequence_1')
 
     it 'build the navigation', ->
       classes = $('#sequence-list li>a').map(-> $(this).attr('class')).get()
@@ -74,7 +74,7 @@ describe 'Sequence', ->
     beforeEach ->
       spyOn $, 'postWithPrefix'
       @sequence = new Sequence '1', @items, 'sequence'
-      spyOnEvent @sequence.element, 'contentChanged'
+      spyOnEvent @sequence.el, 'contentChanged'
       spyOn(@sequence, 'toggleArrows').andCallThrough()
 
     describe 'with a different position than the current one', ->
@@ -109,13 +109,13 @@ describe 'Sequence', ->
         expect(@sequence.toggleArrows).toHaveBeenCalled()
 
       it 'trigger contentChanged event', ->
-        expect('contentChanged').toHaveBeenTriggeredOn @sequence.element
+        expect('contentChanged').toHaveBeenTriggeredOn @sequence.el
 
     describe 'with the same position as the current one', ->
       it 'should not trigger contentChanged event', ->
         @sequence.position = 2
         @sequence.render 2
-        expect('contentChanged').not.toHaveBeenTriggeredOn @sequence.element
+        expect('contentChanged').not.toHaveBeenTriggeredOn @sequence.el
 
   describe 'goto', ->
     beforeEach ->

lms/static/coffee/spec/modules/tab_spec.coffee

@@ -9,7 +9,7 @@ describe 'Tab', ->
       @tab = new Tab 1, @items
 
     it 'set the element', ->
-      expect(@tab.element).toEqual $('#tab_1')
+      expect(@tab.el).toEqual $('#tab_1')
 
     it 'build the tabs', ->
       links = $('.navigation li>a').map(-> $(this).attr('href')).get()
@@ -34,6 +34,6 @@ describe 'Tab', ->
       expect($('#tab-1-2').html()).toEqual ''
 
     it 'trigger contentChanged event on the element', ->
-      spyOnEvent @tab.element, 'contentChanged'
+      spyOnEvent @tab.el, 'contentChanged'
       $('[href="#tab-1-1"]').click()
-      expect('contentChanged').toHaveBeenTriggeredOn @tab.element
+      expect('contentChanged').toHaveBeenTriggeredOn @tab.el

lms/static/coffee/spec/modules/video/video_caption_spec.coffee

@@ -13,7 +13,7 @@ describe 'VideoCaption', ->
 
     describe 'always', ->
       beforeEach ->
-        @caption = new VideoCaption element: $('.video'), youtubeId: 'def456', currentSpeed: '1.0'
+        @caption = new VideoCaption el: $('.video'), youtubeId: 'def456', currentSpeed: '1.0'
 
       it 'set the youtube id', ->
         expect(@caption.youtubeId).toEqual 'def456'
@@ -43,7 +43,7 @@ describe 'VideoCaption', ->
     describe 'when on a non touch-based device', ->
       beforeEach ->
         spyOn(window, 'onTouchBasedDevice').andReturn false
-        @caption = new VideoCaption element: $('.video'), youtubeId: 'def456', currentSpeed: '1.0'
+        @caption = new VideoCaption el: $('.video'), youtubeId: 'def456', currentSpeed: '1.0'
 
       it 'render the caption', ->
         expect($('.subtitles').html()).toMatch new RegExp('''
@@ -67,7 +67,7 @@ describe 'VideoCaption', ->
     describe 'when on a touch-based device', ->
       beforeEach ->
         spyOn(window, 'onTouchBasedDevice').andReturn true
-        @caption = new VideoCaption element: $('.video'), youtubeId: 'def456', currentSpeed: '1.0'
+        @caption = new VideoCaption el: $('.video'), youtubeId: 'def456', currentSpeed: '1.0'
 
       it 'show explaination message', ->
         expect($('.subtitles li')).toHaveHtml "Caption will be displayed when you start playing the video."
@@ -79,7 +79,7 @@ describe 'VideoCaption', ->
     beforeEach ->
       spyOn(window, 'setTimeout').andReturn 100
       spyOn window, 'clearTimeout'
-      @caption = new VideoCaption element: $('.video'), youtubeId: 'def456', currentSpeed: '1.0'
+      @caption = new VideoCaption el: $('.video'), youtubeId: 'def456', currentSpeed: '1.0'
 
     describe 'when cursor is outside of the caption box', ->
       beforeEach ->
@@ -143,7 +143,7 @@ describe 'VideoCaption', ->
 
   describe 'search', ->
     beforeEach ->
-      @caption = new VideoCaption element: $('.video'), youtubeId: 'def456', currentSpeed: '1.0'
+      @caption = new VideoCaption el: $('.video'), youtubeId: 'def456', currentSpeed: '1.0'
 
     it 'return a correct caption index', ->
       expect(@caption.search(0)).toEqual 0
@@ -157,7 +157,7 @@ describe 'VideoCaption', ->
     describe 'when the caption was not rendered', ->
       beforeEach ->
         spyOn(window, 'onTouchBasedDevice').andReturn true
-        @caption = new VideoCaption element: $('.video'), youtubeId: 'def456', currentSpeed: '1.0'
+        @caption = new VideoCaption el: $('.video'), youtubeId: 'def456', currentSpeed: '1.0'
         @caption.play()
 
       it 'render the caption', ->
@@ -184,7 +184,7 @@ describe 'VideoCaption', ->
 
   describe 'pause', ->
     beforeEach ->
-      @caption = new VideoCaption element: $('.video'), youtubeId: 'def456', currentSpeed: '1.0'
+      @caption = new VideoCaption el: $('.video'), youtubeId: 'def456', currentSpeed: '1.0'
       @caption.playing = true
       @caption.pause()
 
@@ -193,7 +193,7 @@ describe 'VideoCaption', ->
 
   describe 'updatePlayTime', ->
     beforeEach ->
-      @caption = new VideoCaption element: $('.video'), youtubeId: 'def456', currentSpeed: '1.0'
+      @caption = new VideoCaption el: $('.video'), youtubeId: 'def456', currentSpeed: '1.0'
 
     describe 'when the video speed is 1.0x', ->
       beforeEach ->
@@ -240,7 +240,7 @@ describe 'VideoCaption', ->
 
   describe 'resize', ->
     beforeEach ->
-      @caption = new VideoCaption element: $('.video'), youtubeId: 'def456', currentSpeed: '1.0'
+      @caption = new VideoCaption el: $('.video'), youtubeId: 'def456', currentSpeed: '1.0'
       $('.subtitles li[data-index=1]').addClass 'current'
       @caption.resize()
 
@@ -258,7 +258,7 @@ describe 'VideoCaption', ->
 
   describe 'scrollCaption', ->
     beforeEach ->
-      @caption = new VideoCaption element: $('.video'), youtubeId: 'def456', currentSpeed: '1.0'
+      @caption = new VideoCaption el: $('.video'), youtubeId: 'def456', currentSpeed: '1.0'
 
     describe 'when frozen', ->
       beforeEach ->
@@ -286,12 +286,12 @@ describe 'VideoCaption', ->
           @caption.scrollCaption()
 
         it 'scroll to current caption', ->
-          expect($.fn.scrollTo).toHaveBeenCalledWith $('.subtitles .current:first', @caption.element),
+          expect($.fn.scrollTo).toHaveBeenCalledWith $('.subtitles .current:first', @caption.el),
             offset: - ($('.video-wrapper').height() / 2 - $('.subtitles .current:first').height() / 2)
 
   describe 'seekPlayer', ->
     beforeEach ->
-      @caption = new VideoCaption element: $('.video'), youtubeId: 'def456', currentSpeed: '1.0'
+      @caption = new VideoCaption el: $('.video'), youtubeId: 'def456', currentSpeed: '1.0'
       @time = null
       $(@caption).bind 'seek', (event, time) => @time = time
 
@@ -313,25 +313,25 @@ describe 'VideoCaption', ->
 
   describe 'toggle', ->
     beforeEach ->
-      @caption = new VideoCaption element: $('.video'), youtubeId: 'def456', currentSpeed: '1.0'
+      @caption = new VideoCaption el: $('.video'), youtubeId: 'def456', currentSpeed: '1.0'
       $('.subtitles li[data-index=1]').addClass 'current'
 
     describe 'when the caption is visible', ->
       beforeEach ->
-        @caption.element.removeClass 'closed'
+        @caption.el.removeClass 'closed'
         @caption.toggle jQuery.Event('click')
 
       it 'hide the caption', ->
-        expect(@caption.element).toHaveClass 'closed'
+        expect(@caption.el).toHaveClass 'closed'
 
 
     describe 'when the caption is hidden', ->
       beforeEach ->
-        @caption.element.addClass 'closed'
+        @caption.el.addClass 'closed'
         @caption.toggle jQuery.Event('click')
 
       it 'show the caption', ->
-        expect(@caption.element).not.toHaveClass 'closed'
+        expect(@caption.el).not.toHaveClass 'closed'
 
       it 'scroll the caption', ->
         expect($.fn.scrollTo).toHaveBeenCalled()

lms/static/coffee/spec/modules/video/video_control_spec.coffee

@@ -5,7 +5,7 @@ describe 'VideoControl', ->
 
   describe 'constructor', ->
     it 'render the video controls', ->
-      new VideoControl(element: $('.video-controls'))
+      new VideoControl(el: $('.video-controls'))
       expect($('.video-controls').html()).toContain '''
         <div class="slider"></div>
         <div>
@@ -22,7 +22,7 @@ describe 'VideoControl', ->
       '''
 
     it 'bind the playback button', ->
-      control = new VideoControl(element: $('.video-controls'))
+      control = new VideoControl(el: $('.video-controls'))
       expect($('.video_control')).toHandleWith 'click', control.togglePlayback
 
     describe 'when on a touch based device', ->
@@ -30,7 +30,7 @@ describe 'VideoControl', ->
         spyOn(window, 'onTouchBasedDevice').andReturn true
 
       it 'does not add the play class to video control', ->
-        new VideoControl(element: $('.video-controls'))
+        new VideoControl(el: $('.video-controls'))
         expect($('.video_control')).not.toHaveClass 'play'
         expect($('.video_control')).not.toHaveHtml 'Play'
 
@@ -40,13 +40,13 @@ describe 'VideoControl', ->
         spyOn(window, 'onTouchBasedDevice').andReturn false
 
       it 'add the play class to video control', ->
-        new VideoControl(element: $('.video-controls'))
+        new VideoControl(el: $('.video-controls'))
         expect($('.video_control')).toHaveClass 'play'
         expect($('.video_control')).toHaveHtml 'Play'
 
   describe 'play', ->
     beforeEach ->
-      @control = new VideoControl(element: $('.video-controls'))
+      @control = new VideoControl(el: $('.video-controls'))
       @control.play()
 
     it 'switch playback button to play state', ->
@@ -56,7 +56,7 @@ describe 'VideoControl', ->
 
   describe 'pause', ->
     beforeEach ->
-      @control = new VideoControl(element: $('.video-controls'))
+      @control = new VideoControl(el: $('.video-controls'))
       @control.pause()
 
     it 'switch playback button to pause state', ->
@@ -66,7 +66,7 @@ describe 'VideoControl', ->
 
   describe 'togglePlayback', ->
     beforeEach ->
-      @control = new VideoControl(element: $('.video-controls'))
+      @control = new VideoControl(el: $('.video-controls'))
 
     describe 'when the control does not have play or pause class', ->
       beforeEach ->

lms/static/coffee/spec/modules/video/video_player_spec.coffee

@@ -21,19 +21,19 @@ describe 'VideoPlayer', ->
         expect(@player.currentTime).toEqual 0
 
       it 'set the element', ->
-        expect(@player.element).toBe '#video_example'
+        expect(@player.el).toBe '#video_example'
 
       it 'create video control', ->
-        expect(window.VideoControl).toHaveBeenCalledWith element: $('.video-controls', @player.element)
+        expect(window.VideoControl).toHaveBeenCalledWith el: $('.video-controls', @player.el)
 
       it 'create video caption', ->
-        expect(window.VideoCaption).toHaveBeenCalledWith element: @player.element, youtubeId: 'def456', currentSpeed: '1.0'
+        expect(window.VideoCaption).toHaveBeenCalledWith el: @player.el, youtubeId: 'def456', currentSpeed: '1.0'
 
       it 'create video speed control', ->
-        expect(window.VideoSpeedControl).toHaveBeenCalledWith element: $('.secondary-controls', @player.element), speeds: ['0.75', '1.0'], currentSpeed: '1.0'
+        expect(window.VideoSpeedControl).toHaveBeenCalledWith el: $('.secondary-controls', @player.el), speeds: ['0.75', '1.0'], currentSpeed: '1.0'
 
       it 'create video progress slider', ->
-        expect(window.VideoProgressSlider).toHaveBeenCalledWith element: $('.slider', @player.element)
+        expect(window.VideoProgressSlider).toHaveBeenCalledWith el: $('.slider', @player.el)
 
       it 'create Youtube player', ->
         expect(YT.Player).toHaveBeenCalledWith 'example'
@@ -83,7 +83,7 @@ describe 'VideoPlayer', ->
         expect($('.hide-subtitles')).toHaveData 'qtip'
 
       it 'create video volume control', ->
-        expect(window.VideoVolumeControl).toHaveBeenCalledWith element: $('.secondary-controls', @player.element)
+        expect(window.VideoVolumeControl).toHaveBeenCalledWith el: $('.secondary-controls', @player.el)
 
     describe 'when on a touch based device', ->
       beforeEach ->
@@ -339,34 +339,34 @@ describe 'VideoPlayer', ->
 
     describe 'when the video player is not full screen', ->
       beforeEach ->
-        @player.element.removeClass 'fullscreen'
+        @player.el.removeClass 'fullscreen'
         @player.toggleFullScreen(jQuery.Event("click"))
 
       it 'replace the full screen button tooltip', ->
         expect($('.add-fullscreen')).toHaveAttr 'title', 'Exit fill browser'
 
       it 'add a new exit from fullscreen button', ->
-        expect(@player.element).toContain 'a.exit'
+        expect(@player.el).toContain 'a.exit'
 
       it 'add the fullscreen class', ->
-        expect(@player.element).toHaveClass 'fullscreen'
+        expect(@player.el).toHaveClass 'fullscreen'
 
       it 'tell VideoCaption to resize', ->
         expect(@player.caption.resize).toHaveBeenCalled()
 
     describe 'when the video player already full screen', ->
       beforeEach ->
-        @player.element.addClass 'fullscreen'
+        @player.el.addClass 'fullscreen'
         @player.toggleFullScreen(jQuery.Event("click"))
 
       it 'replace the full screen button tooltip', ->
         expect($('.add-fullscreen')).toHaveAttr 'title', 'Fill browser'
 
       it 'remove exit full screen button', ->
-        expect(@player.element).not.toContain 'a.exit'
+        expect(@player.el).not.toContain 'a.exit'
 
       it 'remove the fullscreen class', ->
-        expect(@player.element).not.toHaveClass 'fullscreen'
+        expect(@player.el).not.toHaveClass 'fullscreen'
 
       it 'tell VideoCaption to resize', ->
         expect(@player.caption.resize).toHaveBeenCalled()

lms/static/coffee/spec/modules/video/video_progress_slider_spec.coffee

@@ -7,7 +7,7 @@ describe 'VideoProgressSlider', ->
       beforeEach ->
         spyOn($.fn, 'slider').andCallThrough()
         spyOn(window, 'onTouchBasedDevice').andReturn false
-        @slider = new VideoProgressSlider element: $('.slider')
+        @slider = new VideoProgressSlider el: $('.slider')
 
       it 'build the slider', ->
         expect(@slider.slider).toBe '.slider'
@@ -35,7 +35,7 @@ describe 'VideoProgressSlider', ->
       beforeEach ->
         spyOn($.fn, 'slider').andCallThrough()
         spyOn(window, 'onTouchBasedDevice').andReturn true
-        @slider = new VideoProgressSlider element: $('.slider')
+        @slider = new VideoProgressSlider el: $('.slider')
 
       it 'does not build the slider', ->
         expect(@slider.slider).toBeUndefined
@@ -43,7 +43,7 @@ describe 'VideoProgressSlider', ->
 
   describe 'play', ->
     beforeEach ->
-      @slider = new VideoProgressSlider element: $('.slider')
+      @slider = new VideoProgressSlider el: $('.slider')
       spyOn($.fn, 'slider').andCallThrough()
 
     describe 'when the slider was already built', ->
@@ -82,7 +82,7 @@ describe 'VideoProgressSlider', ->
 
   describe 'updatePlayTime', ->
     beforeEach ->
-      @slider = new VideoProgressSlider element: $('.slider')
+      @slider = new VideoProgressSlider el: $('.slider')
       spyOn($.fn, 'slider').andCallThrough()
 
     describe 'when frozen', ->
@@ -106,7 +106,7 @@ describe 'VideoProgressSlider', ->
 
   describe 'onSlide', ->
     beforeEach ->
-      @slider = new VideoProgressSlider element: $('.slider')
+      @slider = new VideoProgressSlider el: $('.slider')
       @time = null
       $(@slider).bind 'seek', (event, time) => @time = time
       spyOnEvent @slider, 'seek'
@@ -124,7 +124,7 @@ describe 'VideoProgressSlider', ->
 
   describe 'onChange', ->
     beforeEach ->
-      @slider = new VideoProgressSlider element: $('.slider')
+      @slider = new VideoProgressSlider el: $('.slider')
       @slider.onChange {}, value: 20
 
     it 'update the tooltip', ->
@@ -132,7 +132,7 @@ describe 'VideoProgressSlider', ->
 
   describe 'onStop', ->
     beforeEach ->
-      @slider = new VideoProgressSlider element: $('.slider')
+      @slider = new VideoProgressSlider el: $('.slider')
       @time = null
       $(@slider).bind 'seek', (event, time) => @time = time
       spyOnEvent @slider, 'seek'
@@ -153,7 +153,7 @@ describe 'VideoProgressSlider', ->
 
   describe 'updateTooltip', ->
     beforeEach ->
-      @slider = new VideoProgressSlider element: $('.slider')
+      @slider = new VideoProgressSlider el: $('.slider')
       @slider.updateTooltip 90
 
     it 'set the tooltip value', ->

lms/static/coffee/spec/modules/video/video_speed_control_spec.coffee

@@ -6,7 +6,7 @@ describe 'VideoSpeedControl', ->
   describe 'constructor', ->
     describe 'always', ->
       beforeEach ->
-        @speedControl = new VideoSpeedControl element: $('.secondary-controls'), speeds: @video.speeds, currentSpeed: '1.0'
+        @speedControl = new VideoSpeedControl el: $('.secondary-controls'), speeds: @video.speeds, currentSpeed: '1.0'
 
       it 'add the video speed control to player', ->
         expect($('.secondary-controls').html()).toContain '''
@@ -26,7 +26,7 @@ describe 'VideoSpeedControl', ->
       beforeEach ->
         spyOn(window, 'onTouchBasedDevice').andReturn true
         $('.speeds').removeClass 'open'
-        @speedControl = new VideoSpeedControl element: $('.secondary-controls'), speeds: @video.speeds, currentSpeed: '1.0'
+        @speedControl = new VideoSpeedControl el: $('.secondary-controls'), speeds: @video.speeds, currentSpeed: '1.0'
 
       it 'open the speed toggle on click', ->
         $('.speeds').click()
@@ -38,7 +38,7 @@ describe 'VideoSpeedControl', ->
       beforeEach ->
         spyOn(window, 'onTouchBasedDevice').andReturn false
         $('.speeds').removeClass 'open'
-        @speedControl = new VideoSpeedControl element: $('.secondary-controls'), speeds: @video.speeds, currentSpeed: '1.0'
+        @speedControl = new VideoSpeedControl el: $('.secondary-controls'), speeds: @video.speeds, currentSpeed: '1.0'
 
       it 'open the speed toggle on hover', ->
         $('.speeds').mouseenter()
@@ -56,7 +56,7 @@ describe 'VideoSpeedControl', ->
 
   describe 'changeVideoSpeed', ->
     beforeEach ->
-      @speedControl = new VideoSpeedControl element: $('.secondary-controls'), speeds: @video.speeds, currentSpeed: '1.0'
+      @speedControl = new VideoSpeedControl el: $('.secondary-controls'), speeds: @video.speeds, currentSpeed: '1.0'
       @video.setSpeed '1.0'
 
     describe 'when new speed is the same', ->
@@ -80,7 +80,7 @@ describe 'VideoSpeedControl', ->
 
   describe 'onSpeedChange', ->
     beforeEach ->
-      @speedControl = new VideoSpeedControl element: $('.secondary-controls'), speeds: @video.speeds, currentSpeed: '1.0'
+      @speedControl = new VideoSpeedControl el: $('.secondary-controls'), speeds: @video.speeds, currentSpeed: '1.0'
       $('li[data-speed="1.0"] a').addClass 'active'
       @speedControl.setSpeed '0.75'
 

lms/static/coffee/spec/modules/video/video_volume_control_spec.coffee

@@ -6,7 +6,7 @@ describe 'VideoVolumeControl', ->
   describe 'constructor', ->
     beforeEach ->
       spyOn($.fn, 'slider')
-      @volumeControl = new VideoVolumeControl element: $('.secondary-controls')
+      @volumeControl = new VideoVolumeControl el: $('.secondary-controls')
 
     it 'initialize currentVolume to 100', ->
       expect(@volumeControl.currentVolume).toEqual 100
@@ -44,7 +44,7 @@ describe 'VideoVolumeControl', ->
     beforeEach ->
       spyOnEvent @volumeControl, 'volumeChange'
       @newVolume = undefined
-      @volumeControl = new VideoVolumeControl element: $('.secondary-controls')
+      @volumeControl = new VideoVolumeControl el: $('.secondary-controls')
       $(@volumeControl).bind 'volumeChange', (event, volume) => @newVolume = volume
 
     describe 'when the new volume is more than 0', ->
@@ -70,7 +70,7 @@ describe 'VideoVolumeControl', ->
   describe 'toggleMute', ->
     beforeEach ->
       @newVolume = undefined
-      @volumeControl = new VideoVolumeControl element: $('.secondary-controls')
+      @volumeControl = new VideoVolumeControl el: $('.secondary-controls')
       $(@volumeControl).bind 'volumeChange', (event, volume) => @newVolume = volume
 
     describe 'when the current volume is more than 0', ->

lms/static/coffee/spec/modules/video_spec.coffee

@@ -21,7 +21,7 @@ describe 'Video', ->
         expect(window.player).toBeNull()
 
       it 'set the elements', ->
-        expect(@video.element).toBe '#video_example'
+        expect(@video.el).toBe '#video_example'
 
       it 'parse the videos', ->
         expect(@video.videos).toEqual

lms/static/coffee/src/_subview.coffee

@@ -7,7 +7,7 @@ class @Subview
     @bind()
 
   $: (selector) ->
-    $(selector, @element)
+    $(selector, @el)
 
   initialize: ->
   render: ->

lms/static/coffee/src/main.coffee

@@ -24,8 +24,8 @@ $ ->
 
   # Preserved for backward compatibility
   window.submit_circuit = (circuit_id) ->
-    $("input.schematic").each (index, element) ->
-      element.schematic.update_value()
+    $("input.schematic").each (index, el) ->
+      el.schematic.update_value()
 
     schematic_value $("#schematic_#{circuit_id}").attr("value")
     $.postWithPrefix "/save_circuit/#{circuit_id}", schematic: schematic_value, (data) ->

lms/static/coffee/src/modules/problem.coffee

 class @Problem
   constructor: (@id, @element_id, url) ->
-    @element = $("##{element_id}")
+    @el = $("##{element_id}")
     @render()
 
   $: (selector) ->
-    $(selector, @element)
+    $(selector, @el)
 
   bind: =>
     MathJax.Hub.Queue ["Typeset", MathJax.Hub]
@@ -18,16 +18,16 @@ class @Problem
 
   updateProgress: (response) =>
     if response.progress_changed
-        @element.attr progress: response.progress_status
-        @element.trigger('progressChanged')
+        @el.attr progress: response.progress_status
+        @el.trigger('progressChanged')
 
   render: (content) ->
     if content
-      @element.html(content)
+      @el.html(content)
       @bind()
     else
       $.postWithPrefix "/modx/#{@id}/problem_get", (response) =>
-        @element.html(response.html)
+        @el.html(response.html)
         @bind()
 
   check: =>
@@ -47,7 +47,7 @@ class @Problem
         @updateProgress response
 
   show: =>
-    if !@element.hasClass 'showed'
+    if !@el.hasClass 'showed'
       Logger.log 'problem_show', problem: @id
       $.postWithPrefix "/modx/#{@id}/problem_show", (response) =>
         answers = response.answers
@@ -59,12 +59,12 @@ class @Problem
             @$("#answer_#{key}, #solution_#{key}").html(value)
         MathJax.Hub.Queue ["Typeset", MathJax.Hub]
         @$('.show').val 'Hide Answer'
-        @element.addClass 'showed'
+        @el.addClass 'showed'
         @updateProgress response
     else
       @$('[id^=answer_], [id^=solution_]').text ''
       @$('[correct_answer]').attr correct_answer: null
-      @element.removeClass 'showed'
+      @el.removeClass 'showed'
       @$('.show').val 'Show Answer'
 
   save: =>

lms/static/coffee/src/modules/sequence.coffee

 class @Sequence
   constructor: (@id, @element_id, @elements, @tag, position) ->
-    @element = $("#sequence_#{@element_id}")
+    @el = $("#sequence_#{@element_id}")
     @buildNavigation()
     @initProgress()
     @bind()
     @render position
 
   $: (selector) ->
-    $(selector, @element)
+    $(selector, @el)
 
   bind: ->
     @$('#sequence-list a').click @goto
@@ -57,7 +57,7 @@ class @Sequence
         when 'none' then element.addClass('progress-none')
         when 'in_progress' then element.addClass('progress-some')
         when 'done' then element.addClass('progress-done')
-  
+
   buildNavigation: ->
     $.each @elements, (index, item) =>
       link = $('<a>').attr class: "seq_#{item.type}_inactive", 'data-element': index + 1
@@ -65,10 +65,10 @@ class @Sequence
       # TODO (vshnayder): add item.progress_detail either to the title or somewhere else.
       # Make sure it gets updated after ajax calls.
       # implementation note: will need to figure out how to handle combining detail
-      # statuses of multiple modules in js. 
+      # statuses of multiple modules in js.
       list_item = $('<li>').append(link.append(title))
       @setProgress item.progress_status, link
-        
+
       @$('#sequence-list').append list_item
 
   toggleArrows: =>
@@ -89,7 +89,7 @@ class @Sequence
       if @position != undefined
         @mark_visited @position
         $.postWithPrefix "/modx/#{@id}/goto_position", position: new_position
-        
+
       @mark_active new_position
       @$('#seq_content').html @elements[new_position - 1].content
 
@@ -97,7 +97,7 @@ class @Sequence
       @position = new_position
       @toggleArrows()
       @hookUpProgressEvent()
-      @element.trigger 'contentChanged'
+      @el.trigger 'contentChanged'
 
   goto: (event) =>
     event.preventDefault()

lms/static/coffee/src/modules/tab.coffee

 class @Tab
   constructor: (@id, @items) ->
-    @element = $("#tab_#{id}")
+    @el = $("#tab_#{id}")
     @render()
 
   $: (selector) ->
-    $(selector, @element)
+    $(selector, @el)
 
   render: ->
     $.each @items, (index, item) =>
       tab = $('<a>').attr(href: "##{@tabId(index)}").html(item.title)
       @$('.navigation').append($('<li>').append(tab))
-      @element.append($('<section>').attr(id: @tabId(index)))
-    @element.tabs
+      @el.append($('<section>').attr(id: @tabId(index)))
+    @el.tabs
       show: @onShow
 
   onShow: (element, ui) =>
     @$('section.ui-tabs-hide').html('')
     @$("##{@tabId(ui.index)}").html(@items[ui.index]['content'])
-    @element.trigger 'contentChanged'
+    @el.trigger 'contentChanged'
 
   tabId: (index) ->
     "tab-#{@id}-#{index}"

lms/static/coffee/src/modules/video.coffee

 class @Video
   constructor: (@id, videos) ->
     window.player = null
-    @element = $("#video_#{@id}")
+    @el = $("#video_#{@id}")
     @parseVideos videos
     @fetchMetadata()
     @parseSpeed()

lms/static/coffee/src/modules/video/video_caption.coffee

@@ -118,16 +118,16 @@ class @VideoCaption extends Subview
 
   toggle: (event) =>
     event.preventDefault()
-    if @element.hasClass('closed')
+    if @el.hasClass('closed')
       @$('.hide-subtitles').attr('title', 'Turn off captions')
-      @element.removeClass('closed')
+      @el.removeClass('closed')
       @scrollCaption()
     else
       @$('.hide-subtitles').attr('title', 'Turn on captions')
-      @element.addClass('closed')
+      @el.addClass('closed')
 
   captionHeight: ->
-    if @element.hasClass('fullscreen')
+    if @el.hasClass('fullscreen')
       $(window).height() - @$('.video-controls').height()
     else
       @$('.video-wrapper').height()

lms/static/coffee/src/modules/video/video_control.coffee

@@ -3,7 +3,7 @@ class @VideoControl extends Subview
     @$('.video_control').click @togglePlayback
 
   render: ->
-    @element.append """
+    @el.append """
       <div class="slider"></div>
       <div>
         <ul class="vcr">

lms/static/coffee/src/modules/video/video_player.coffee

@@ -4,7 +4,7 @@ class @VideoPlayer extends Subview
     YT.PlayerState.UNSTARTED = -1
 
     @currentTime = 0
-    @element = $("#video_#{@video.id}")
+    @el = $("#video_#{@video.id}")
 
   bind: ->
     $(@control).bind('play', @play)
@@ -20,16 +20,16 @@ class @VideoPlayer extends Subview
     @addToolTip() unless onTouchBasedDevice()
 
   bindExitFullScreen: (event) =>
-    if @element.hasClass('fullscreen') && event.keyCode == 27
+    if @el.hasClass('fullscreen') && event.keyCode == 27
       @toggleFullScreen(event)
 
   render: ->
-    @control = new VideoControl element: @$('.video-controls')
-    @caption = new VideoCaption element: @element, youtubeId: @video.youtubeId('1.0'), currentSpeed: @currentSpeed()
+    @control = new VideoControl el: @$('.video-controls')
+    @caption = new VideoCaption el: @el, youtubeId: @video.youtubeId('1.0'), currentSpeed: @currentSpeed()
     unless onTouchBasedDevice()
-      @volumeControl = new VideoVolumeControl element: @$('.secondary-controls')
-    @speedControl = new VideoSpeedControl element: @$('.secondary-controls'), speeds: @video.speeds, currentSpeed: @currentSpeed()
-    @progressSlider = new VideoProgressSlider element: @$('.slider')
+      @volumeControl = new VideoVolumeControl el: @$('.secondary-controls')
+    @speedControl = new VideoSpeedControl el: @$('.secondary-controls'), speeds: @video.speeds, currentSpeed: @currentSpeed()
+    @progressSlider = new VideoProgressSlider el: @$('.slider')
     @player = new YT.Player @video.id,
       playerVars:
         controls: 0
@@ -125,12 +125,12 @@ class @VideoPlayer extends Subview
 
   toggleFullScreen: (event) =>
     event.preventDefault()
-    if @element.hasClass('fullscreen')
+    if @el.hasClass('fullscreen')
       @$('.exit').remove()
       @$('.add-fullscreen').attr('title', 'Fill browser')
-      @element.removeClass('fullscreen')
+      @el.removeClass('fullscreen')
     else
-      @element.append('<a href="#" class="exit">Exit</a>').addClass('fullscreen')
+      @el.append('<a href="#" class="exit">Exit</a>').addClass('fullscreen')
       @$('.add-fullscreen').attr('title', 'Exit fill browser')
       @$('.exit').click @toggleFullScreen
     @caption.resize()

lms/static/coffee/src/modules/video/video_progress_slider.coffee

@@ -3,7 +3,7 @@ class @VideoProgressSlider extends Subview
     @buildSlider() unless onTouchBasedDevice()
 
   buildSlider: ->
-    @slider = @element.slider
+    @slider = @el.slider
       range: 'min'
       change: @onChange
       slide: @onSlide

lms/static/coffee/src/modules/video/video_speed_control.coffee

@@ -15,7 +15,7 @@ class @VideoSpeedControl extends Subview
         $(this).removeClass('open')
 
   render: ->
-    @element.prepend """
+    @el.prepend """
       <div class="speeds">
         <a href="#">
           <h3>Speed</h3>

lms/static/coffee/src/modules/video/video_volume_control.coffee

@@ -10,7 +10,7 @@ class @VideoVolumeControl extends Subview
     @$('.volume>a').click(@toggleMute)
 
   render: ->
-    @element.prepend """
+    @el.prepend """
       <div class="volume">
         <a href="#"></a>
         <div class="volume-slider-container">