Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Comparing changes

Choose two branches to see what's changed or to start a new pull request. If you need to, you can also compare across forks.

Open a pull request

Create a new pull request by comparing changes across two branches. If you need to, you can also compare across forks.
base fork: milandobrota/SpeedReading
base: 22165dccf9
...
head fork: milandobrota/SpeedReading
compare: b11983588b
Checking mergeability… Don't worry, you can still create the pull request.
  • 2 commits
  • 7 files changed
  • 0 commit comments
  • 1 contributor
View
1  app/assets/javascripts/application.js
@@ -180,6 +180,7 @@ function ContentSelector(settings) {
}
// selector.config.current_test.words = selected_content.body.split(" ").reverse();
selector.config.current_test.text = selected_content.body;
+ selector.config.current_test.content_id = selected_content.id;
return false;
});
}
View
209 app/assets/javascripts/jquery.tinyscrollbar.js
@@ -0,0 +1,209 @@
+/*
+ * Tiny Scrollbar 1.8
+ * http://www.baijs.nl/tinyscrollbar/
+ *
+ * Copyright 2012, Maarten Baijs
+ * Dual licensed under the MIT or GPL Version 2 licenses.
+ * http://www.opensource.org/licenses/mit-license.php
+ * http://www.opensource.org/licenses/gpl-2.0.php
+ *
+ * Date: 26 / 07 / 2012
+ * Depends on library: jQuery
+ *
+ */
+( function( $ )
+{
+ $.tiny = $.tiny || { };
+
+ $.tiny.scrollbar = {
+ options: {
+ axis : 'y' // vertical or horizontal scrollbar? ( x || y ).
+ , wheel : 40 // how many pixels must the mouswheel scroll at a time.
+ , scroll : true // enable or disable the mousewheel.
+ , lockscroll : true // return scrollwheel to browser if there is no more content.
+ , size : 'auto' // set the size of the scrollbar to auto or a fixed number.
+ , sizethumb : 'auto' // set the size of the thumb to auto or a fixed number.
+ }
+ };
+
+ $.fn.tinyscrollbar = function( params )
+ {
+ var options = $.extend( {}, $.tiny.scrollbar.options, params );
+
+ this.each( function()
+ {
+ $( this ).data('tsb', new Scrollbar( $( this ), options ) );
+ });
+
+ return this;
+ };
+
+ $.fn.tinyscrollbar_update = function(sScroll)
+ {
+ return $( this ).data( 'tsb' ).update( sScroll );
+ };
+
+ function Scrollbar( root, options )
+ {
+ var oSelf = this
+ , oWrapper = root
+ , oViewport = { obj: $( '.viewport', root ) }
+ , oContent = { obj: $( '.overview', root ) }
+ , oScrollbar = { obj: $( '.scrollbar', root ) }
+ , oTrack = { obj: $( '.track', oScrollbar.obj ) }
+ , oThumb = { obj: $( '.thumb', oScrollbar.obj ) }
+ , sAxis = options.axis === 'x'
+ , sDirection = sAxis ? 'left' : 'top'
+ , sSize = sAxis ? 'Width' : 'Height'
+ , iScroll = 0
+ , iPosition = { start: 0, now: 0 }
+ , iMouse = {}
+ , touchEvents = ( 'ontouchstart' in document.documentElement ) ? true : false
+ ;
+
+ function initialize()
+ {
+ oSelf.update();
+ setEvents();
+
+ return oSelf;
+ }
+
+ this.update = function( sScroll )
+ {
+ oViewport[ options.axis ] = oViewport.obj[0][ 'offset'+ sSize ];
+ oContent[ options.axis ] = oContent.obj[0][ 'scroll'+ sSize ];
+ oContent.ratio = oViewport[ options.axis ] / oContent[ options.axis ];
+
+ oScrollbar.obj.toggleClass( 'disable', oContent.ratio >= 1 );
+
+ oTrack[ options.axis ] = options.size === 'auto' ? oViewport[ options.axis ] : options.size;
+ oThumb[ options.axis ] = Math.min( oTrack[ options.axis ], Math.max( 0, ( options.sizethumb === 'auto' ? ( oTrack[ options.axis ] * oContent.ratio ) : options.sizethumb ) ) );
+
+ oScrollbar.ratio = options.sizethumb === 'auto' ? ( oContent[ options.axis ] / oTrack[ options.axis ] ) : ( oContent[ options.axis ] - oViewport[ options.axis ] ) / ( oTrack[ options.axis ] - oThumb[ options.axis ] );
+
+ iScroll = ( sScroll === 'relative' && oContent.ratio <= 1 ) ? Math.min( ( oContent[ options.axis ] - oViewport[ options.axis ] ), Math.max( 0, iScroll )) : 0;
+ iScroll = ( sScroll === 'bottom' && oContent.ratio <= 1 ) ? ( oContent[ options.axis ] - oViewport[ options.axis ] ) : isNaN( parseInt( sScroll, 10 ) ) ? iScroll : parseInt( sScroll, 10 );
+
+ setSize();
+ };
+
+ function setSize()
+ {
+ var sCssSize = sSize.toLowerCase();
+
+ oThumb.obj.css( sDirection, iScroll / oScrollbar.ratio );
+ oContent.obj.css( sDirection, -iScroll );
+ iMouse.start = oThumb.obj.offset()[ sDirection ];
+
+ oScrollbar.obj.css( sCssSize, oTrack[ options.axis ] );
+ oTrack.obj.css( sCssSize, oTrack[ options.axis ] );
+ oThumb.obj.css( sCssSize, oThumb[ options.axis ] );
+ }
+
+ function setEvents()
+ {
+ if( ! touchEvents )
+ {
+ oThumb.obj.bind( 'mousedown', start );
+ oTrack.obj.bind( 'mouseup', drag );
+ }
+ else
+ {
+ oViewport.obj[0].ontouchstart = function( event )
+ {
+ if( 1 === event.touches.length )
+ {
+ start( event.touches[ 0 ] );
+ event.stopPropagation();
+ }
+ };
+ }
+
+ if( options.scroll && window.addEventListener )
+ {
+ oWrapper[0].addEventListener( 'DOMMouseScroll', wheel, false );
+ oWrapper[0].addEventListener( 'mousewheel', wheel, false );
+ }
+ else if( options.scroll )
+ {
+ oWrapper[0].onmousewheel = wheel;
+ }
+ }
+
+ function start( event )
+ {
+ var oThumbDir = parseInt( oThumb.obj.css( sDirection ), 10 );
+ iMouse.start = sAxis ? event.pageX : event.pageY;
+ iPosition.start = oThumbDir == 'auto' ? 0 : oThumbDir;
+
+ if( ! touchEvents )
+ {
+ $( document ).bind( 'mousemove', drag );
+ $( document ).bind( 'mouseup', end );
+ oThumb.obj.bind( 'mouseup', end );
+ }
+ else
+ {
+ document.ontouchmove = function( event )
+ {
+ event.preventDefault();
+ drag( event.touches[ 0 ] );
+ };
+ document.ontouchend = end;
+ }
+ }
+
+ function wheel( event )
+ {
+ if( oContent.ratio < 1 )
+ {
+ var oEvent = event || window.event
+ , iDelta = oEvent.wheelDelta ? oEvent.wheelDelta / 120 : -oEvent.detail / 3
+ ;
+
+ iScroll -= iDelta * options.wheel;
+ iScroll = Math.min( ( oContent[ options.axis ] - oViewport[ options.axis ] ), Math.max( 0, iScroll ));
+
+ oThumb.obj.css( sDirection, iScroll / oScrollbar.ratio );
+ oContent.obj.css( sDirection, -iScroll );
+
+ if( options.lockscroll || ( iScroll !== ( oContent[ options.axis ] - oViewport[ options.axis ] ) && iScroll !== 0 ) )
+ {
+ oEvent = $.event.fix( oEvent );
+ oEvent.preventDefault();
+ }
+ }
+ }
+
+ function drag( event )
+ {
+ if( oContent.ratio < 1 )
+ {
+ if( ! touchEvents )
+ {
+ iPosition.now = Math.min( ( oTrack[ options.axis ] - oThumb[ options.axis ] ), Math.max( 0, ( iPosition.start + ( ( sAxis ? event.pageX : event.pageY ) - iMouse.start))));
+ }
+ else
+ {
+ iPosition.now = Math.min( ( oTrack[ options.axis ] - oThumb[ options.axis ] ), Math.max( 0, ( iPosition.start + ( iMouse.start - ( sAxis ? event.pageX : event.pageY ) ))));
+ }
+
+ iScroll = iPosition.now * oScrollbar.ratio;
+ oContent.obj.css( sDirection, -iScroll );
+ oThumb.obj.css( sDirection, iPosition.now );
+ }
+ }
+
+ function end()
+ {
+ $( document ).unbind( 'mousemove', drag );
+ $( document ).unbind( 'mouseup', end );
+ oThumb.obj.unbind( 'mouseup', end );
+ document.ontouchmove = document.ontouchend = null;
+ }
+
+ return initialize();
+ }
+
+}(jQuery));
View
11 app/assets/stylesheets/application.css
@@ -295,3 +295,14 @@ a.button {
font-size: 100%;
text-align: center;
}
+
+#scrollbar1 { width: 920px; clear: both; margin: 20px 0 10px; }
+#scrollbar1 .viewport { width: 900px; height: 450px; overflow: hidden; position: relative; }
+#scrollbar1 .overview { list-style: none; position: absolute; left: 0; top: 0; }
+#scrollbar1 .thumb .end,
+#scrollbar1 .thumb { background-color: #003D5D; }
+#scrollbar1 .scrollbar { position: relative; float: right; width: 15px; }
+#scrollbar1 .track { background-color: #D8EEFD; height: 100%; width:13px; position: relative; padding: 0 1px; }
+#scrollbar1 .thumb { height: 20px; width: 13px; cursor: pointer; overflow: hidden; position: absolute; top: 0; }
+#scrollbar1 .thumb .end { overflow: hidden; height: 5px; width: 13px; }
+#scrollbar1 .disable{ display: none; }
View
2  app/controllers/reading_speed_tests_controller.rb
@@ -5,6 +5,8 @@ def new
def create
@reading_speed_test = ReadingSpeedTest.new(params[:reading_speed_test])
+ @reading_speed_test.user = current_user
+
if @reading_speed_test.save
redirect_to @reading_speed_test, notice: "Your reading speed is #{@reading_speed_test.wpm}"
else
View
2  app/controllers/scrambled_word_tests_controller.rb
@@ -5,6 +5,8 @@ def new
def create
@scrambled_word_test = ScrambledWordTest.new(params[:scrambled_word_test])
+ @scrambled_word_test.user = current_user
+
if @scrambled_word_test.save
redirect_to @scrambled_word_test, notice: "Your reading speed is #{@scrambled_word_test.wpm}"
else
View
27 app/views/reading_speed_tests/new.html.haml
@@ -16,6 +16,7 @@ This test will measure your reading speed. Click the start button when you are r
:javascript
var ReadingSpeedTest = new Object({
+ text: #{@reading_speed_test.content.body.to_json}
});
$(function() {
@@ -23,7 +24,17 @@ This test will measure your reading speed. Click the start button when you are r
ReadingSpeedTest.container = $(".test_container");
ReadingSpeedTest.messages = ['Ready?']; // to be displayed
+ $('#start_reading').click(function() {
+ ReadingSpeedTest.start();
+ });
+
+ $("#close_test").click(function() {
+ $("#grayout").css("visibility", "hidden");
+ $(".test_container").hide();
+ });
+
ReadingSpeedTest.start = function() {
+ $("#reading_text_container").html('');
ReadingSpeedTest.container.show();
$("#grayout").css("visibility", "visible");
@@ -44,15 +55,11 @@ This test will measure your reading speed. Click the start button when you are r
}
ReadingSpeedTest.set_start_time_and_show_text = function() {
- ReadingSpeedTest.start_time = new Date();
ReadingSpeedTest.show_text();
+ ReadingSpeedTest.start_time = new Date();
}
ReadingSpeedTest.show_text = function() {
- ReadingSpeedTest.show_words();
- }
-
- ReadingSpeedTest.show_words = function() {
var text_container = $('#reading_text')
text_container.show();
@@ -63,7 +70,9 @@ This test will measure your reading speed. Click the start button when you are r
div = $('<div id="reading_text_container"></div>');
ReadingSpeedTest.container.append(div);
}
- div.html('<div id="reading_text">' + ReadingSpeedTest.text + '</div>' + '<br /><a href="#" class="button" id="finished_reading">Done</a>');
+ div.html('<div id="scrollbar1"><div class="scrollbar"><div class="track"><div class="thumb"><div class="end"></div></div></div></div><div class="viewport"><div class="overview"><div id="reading_text">' + ReadingSpeedTest.text + '</div></div></div></div>' + '<br /><a href="#" class="button" id="finished_reading">Done</a>');
+
+ $('#scrollbar1').tinyscrollbar();
$('#finished_reading').click(function() {
var end_time = new Date();
@@ -71,6 +80,7 @@ This test will measure your reading speed. Click the start button when you are r
var elapsed_time_in_seconds = (end_time - ReadingSpeedTest.start_time) / 1000;
var reading_speed = Math.round(word_count * 60 / elapsed_time_in_seconds);
$('#reading_speed_test_wpm').val(reading_speed);
+ $('#reading_speed_test_content_id').val(ReadingSpeedTest.content_id);
$('#new_reading_speed_test').submit();
});
}
@@ -90,9 +100,4 @@ This test will measure your reading speed. Click the start button when you are r
if (div) div.remove();
}
- $('#start_reading').click(function() {
- ReadingSpeedTest.start();
- });
-
-
});
View
98 app/views/scrambled_word_tests/new.html.haml
@@ -9,10 +9,8 @@ This test will measure your reading speed. Click the start button when you are r
%button#start_reading Start
#reading_text
%div
- %button#finished_reading Done
= form_for(@scrambled_word_test) do |f|
= f.hidden_field :content_id
- = f.hidden_field :user_id
= f.hidden_field :wpm
:javascript
@@ -22,6 +20,86 @@ This test will measure your reading speed. Click the start button when you are r
$(function() {
+ ScrambledWordTest.container = $(".test_container");
+ ScrambledWordTest.messages = ['Ready?']; // to be displayed
+
+ $('#start_reading').click(function() {
+ ScrambledWordTest.start();
+ });
+
+ $("#close_test").click(function() {
+ $("#grayout").css("visibility", "hidden");
+ $(".test_container").hide();
+ });
+
+ ScrambledWordTest.start = function() {
+ $("#reading_text_container").html('');
+ ScrambledWordTest.container.show();
+ $("#grayout").css("visibility", "visible");
+
+ // display all messages
+ var timeout = 0;
+ for(var i = 0; i < ScrambledWordTest.messages.length; i++) {
+ setTimeout(ScrambledWordTest.show_message, timeout);
+ timeout += 1000;
+ }
+
+ // destroy the message container
+ setTimeout(ScrambledWordTest.remove_message_container, timeout);
+
+ // start countdown right after the message container has been removed
+ timeout += 10;
+ Countdown.callback = ScrambledWordTest.set_start_time_and_show_text;
+ setTimeout(Countdown.start, timeout);
+ }
+
+ ScrambledWordTest.set_start_time_and_show_text = function() {
+ ScrambledWordTest.show_text();
+ ScrambledWordTest.start_time = new Date();
+ }
+
+ ScrambledWordTest.show_text = function() {
+ var text_container = $('#reading_text')
+ text_container.show();
+
+ var div;
+ if($("#reading_text_container")[0]) {
+ div = $("#reading_text_container")
+ } else {
+ div = $('<div id="reading_text_container"></div>');
+ ScrambledWordTest.container.append(div);
+ }
+ var scrambled_text = ScrambledWordTest.scramble_sentence(ScrambledWordTest.text);
+ div.html('<div id="scrollbar1"><div class="scrollbar"><div class="track"><div class="thumb"><div class="end"></div></div></div></div><div class="viewport"><div class="overview"><div id="reading_text">' + scrambled_text + '</div></div></div></div>' + '<br /><a href="#" class="button" id="finished_reading">Done</a>');
+
+ $('#scrollbar1').tinyscrollbar();
+
+ $('#finished_reading').click(function() {
+ var end_time = new Date();
+ var word_count = count_words(ScrambledWordTest.text);
+ var elapsed_time_in_seconds = (end_time - ScrambledWordTest.start_time) / 1000;
+ var reading_speed = Math.round(word_count * 60 / elapsed_time_in_seconds);
+ $('#scrambled_word_test_wpm').val(reading_speed);
+ $('#scrambled_word_test_content_id').val(ScrambledWordTest.content_id);
+ $('#new_scrambled_word_test').submit();
+ });
+ }
+
+ ScrambledWordTest.show_message = function() {
+ var div = $("#reading_speed_notice_container");
+ if (!div[0]) { // checking jQuery object
+ div = $('<div id="reading_speed_notice_container" class="message_notice_container"></div>');
+ ScrambledWordTest.container.prepend(div);
+ }
+ var message = ScrambledWordTest.messages.pop();
+ div.html(message);
+ }
+
+ ScrambledWordTest.remove_message_container = function() {
+ var div = $("#reading_speed_notice_container");
+ if (div) div.remove();
+ }
+
ScrambledWordTest.scramble_word = function(word) {
var letter_array = [];
for(var i = 0; i < word.length; i++) {
@@ -56,20 +134,4 @@ This test will measure your reading speed. Click the start button when you are r
return scrambled;
}
- $('#start_reading').click(function() {
- var text_container = $('#reading_text')
- text_container.html(ScrambledWordTest.scramble_sentence(ScrambledWordTest.text));
- text_container.show();
- window.start_time = new Date();
- });
-
- $('#finished_reading').click(function() {
- var end_time = new Date();
- var word_count = count_words(ScrambledWordTest.text);
- var elapsed_time_in_seconds = (end_time - window.start_time) / 1000;
- var reading_speed = Math.round(word_count * 60 / elapsed_time_in_seconds);
- $('#scrambled_word_test_wpm').val(reading_speed);
- $('#new_scrambled_word_test').submit();
- });
-
});

No commit comments for this range

Something went wrong with that request. Please try again.