Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
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: burningpony/phd_checker
base: 8cdeaa5f76
...
head fork: burningpony/phd_checker
compare: a9196ecf7a
Checking mergeability… Don't worry, you can still create the pull request.
  • 3 commits
  • 13 files changed
  • 0 commit comments
  • 1 contributor
View
2  Gemfile.lock
@@ -43,7 +43,7 @@ GEM
heroku (1.17.13)
json (~> 1.4.6)
launchy (~> 0.3.2)
- rest-client (>= 1.4.0, < 1.7.0)
+ rest-client (< 1.7.0, >= 1.4.0)
hpricot (0.8.3)
i18n (0.5.0)
jquery-rails (0.2.7)
View
21 app/controllers/essay_base_controller.rb
@@ -4,14 +4,25 @@ def index
@essays = []
view_directory = File.expand_path('../../views/essays', __FILE__)
Dir.foreach(view_directory).each do |view|
- if view.match(/\d/)
- @essays << view
+ if view.match(/(\d\d*)/)
+ @essays << $1.to_i
end
end
- render :file => "essays/index"
- end
+ @essays = @essays.sort
+
+ render :file => "essays/index", :layout=> false
+ end
+
def show
- render :file => "essays/" + params[:id].match(/\d+/)[0]
+ if params[:id] == 'practice'
+ render :file => "essays/practice"
+ else
+ render :file => "essays/" + params[:id].match(/\d+/)[0]
+ end
+ end
+
+ def sub_layout
+ return nil
end
View
65 app/views/essays/index.haml
@@ -0,0 +1,65 @@
+%html
+ %head
+ -#
+ %title
+ Experiment
+ %link{ :href => "/stylesheets/screen.css", :rel => "stylesheet", :media => "screen, projection", :type => "text/css" }
+ %link{ :href => "/stylesheets/modal.css", :rel => "stylesheet", :media => "screen, projection", :type => "text/css" }
+
+ :javascript
+ var gaJsHost = (("https:" == document.location.protocol) ? "https://" : "http://");
+ document.write(unescape("%3Cscript src='" + gaJsHost + "ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js' type='text/javascript'%3E%3C/script%3E"));
+
+ :erb
+ <!-- jquery addons -->
+ <script type='text/javascript' src="/javascripts/jquery/simple_modal.js"></script>
+
+ <script type='text/javascript' src="/javascripts/ben/phd.js"></script>
+ <script type='text/javascript' src="/javascripts/ben/diff.js"></script>
+
+ -if controller.sub_layout
+ = render :partial=>"essays/#{controller.sub_layout}"
+
+ %body
+ .participant
+ .label
+ Group ID
+ %input{:type=>'text',:id=>'group_id'}
+ .label
+ Participant ID
+ %input{:type=>'text', :id=>'participant_id'}
+
+ %input{:type=>'button', :value=>'start', :class=> 'button'}
+ .error
+
+ .instructions
+ .label
+ instructions
+ .instructions
+ instructions go here
+
+ %input{:type=>'button', :value=>'continue', :class=> 'button'}
+
+ .timer
+
+
+ .container
+ .menu
+ %ol
+ %li
+ %a{:href=> '#', :class=>'show_instruction'}
+ Instructions
+ %li
+ %a{:href=> '#', :class=>'practice_essay_link'}
+ Practice
+
+ -@essays.each do |essay|
+ %li
+ %a{:href=> '#', :class=>'essay_link', :rel => "#{essay}" }
+ =essay
+
+ %li
+ %a{:class=>'quit', :href=> '#'}
+ Quit
+
+ .content
View
13 app/views/essays/index.rhtml
@@ -1,13 +0,0 @@
-<div class="block">
- <div class="content">
- <h2 class="title">Browse Essays</h2>
- <div class="inner">
- <ul class="list">
- <% @essays.each do |essay|%>
- <li><div class="item"> <%=link_to essay, url_for(:controller => (params[:controller]) , :action => :show , :id => essay.to_i) %></div></li>
- <%end%>
- </ul>
- </div>
- </div>
-</div>
-
View
2  app/views/layouts/default.haml
@@ -0,0 +1,2 @@
+
+<%=yield%>
View
2  config/routes.rb
@@ -73,5 +73,5 @@
# This is a legacy wild controller route that's not recommended for RESTful applications.
# Note: This route will make all actions in every controller accessible via GET requests.
- # match ':controller(/:action(/:id(.:format)))'
+ match ':controller(/:action(/:id(.:format)))'
end
View
BIN  public/images/x.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
160 public/javascripts/ben/diff.js
@@ -0,0 +1,160 @@
+/*
+ * Javascript Diff Algorithm
+ * By John Resig (http://ejohn.org/)
+ * Modified by Chu Alan "sprite"
+ *
+ * Released under the MIT license.
+ *
+ * More Info:
+ * http://ejohn.org/projects/javascript-diff-algorithm/
+ */
+
+function escape(s) {
+ var n = s;
+ n = n.replace(/&/g, "&amp;");
+ n = n.replace(/</g, "&lt;");
+ n = n.replace(/>/g, "&gt;");
+ n = n.replace(/"/g, "&quot;");
+
+ return n;
+}
+
+function diffString( o, n ) {
+ o = o.replace(/\s+$/, '');
+ n = n.replace(/\s+$/, '');
+
+ var out = diff(o == "" ? [] : o.split(/\s+/), n == "" ? [] : n.split(/\s+/) );
+ var str = "";
+
+ var oSpace = o.match(/\s+/g);
+ if (oSpace == null) {
+ oSpace = ["\n"];
+ } else {
+ oSpace.push("\n");
+ }
+ var nSpace = n.match(/\s+/g);
+ if (nSpace == null) {
+ nSpace = ["\n"];
+ } else {
+ nSpace.push("\n");
+ }
+
+ if (out.n.length == 0) {
+ for (var i = 0; i < out.o.length; i++) {
+ str += '<del>' + escape(out.o[i]) + oSpace[i] + "</del>";
+ }
+ } else {
+ if (out.n[0].text == null) {
+ for (n = 0; n < out.o.length && out.o[n].text == null; n++) {
+ str += '<del>' + escape(out.o[n]) + oSpace[n] + "</del>";
+ }
+ }
+
+ for ( var i = 0; i < out.n.length; i++ ) {
+ if (out.n[i].text == null) {
+ str += '<ins>' + escape(out.n[i]) + nSpace[i] + "</ins>";
+ } else {
+ var pre = "";
+
+ for (n = out.n[i].row + 1; n < out.o.length && out.o[n].text == null; n++ ) {
+ pre += '<del>' + escape(out.o[n]) + oSpace[n] + "</del>";
+ }
+ str += " " + out.n[i].text + nSpace[i] + pre;
+ }
+ }
+ }
+
+ return str;
+}
+
+function randomColor() {
+ return "rgb(" + (Math.random() * 100) + "%, " +
+ (Math.random() * 100) + "%, " +
+ (Math.random() * 100) + "%)";
+}
+function diffString2( o, n ) {
+ o = o.replace(/\s+$/, '');
+ n = n.replace(/\s+$/, '');
+
+ var out = diff(o == "" ? [] : o.split(/\s+/), n == "" ? [] : n.split(/\s+/) );
+
+ var oSpace = o.match(/\s+/g);
+ if (oSpace == null) {
+ oSpace = ["\n"];
+ } else {
+ oSpace.push("\n");
+ }
+ var nSpace = n.match(/\s+/g);
+ if (nSpace == null) {
+ nSpace = ["\n"];
+ } else {
+ nSpace.push("\n");
+ }
+
+ var os = "";
+ var colors = new Array();
+ for (var i = 0; i < out.o.length; i++) {
+ colors[i] = randomColor();
+
+ if (out.o[i].text != null) {
+ os += '<span style="background-color: ' +colors[i]+ '">' +
+ escape(out.o[i].text) + oSpace[i] + "</span>";
+ } else {
+ os += "<del>" + escape(out.o[i]) + oSpace[i] + "</del>";
+ }
+ }
+
+ var ns = "";
+ for (var i = 0; i < out.n.length; i++) {
+ if (out.n[i].text != null) {
+ ns += '<span style="background-color: ' +colors[out.n[i].row]+ '">' +
+ escape(out.n[i].text) + nSpace[i] + "</span>";
+ } else {
+ ns += "<ins>" + escape(out.n[i]) + nSpace[i] + "</ins>";
+ }
+ }
+
+ return { o : os , n : ns };
+}
+
+function diff( o, n ) {
+ var ns = new Object();
+ var os = new Object();
+
+ for ( var i = 0; i < n.length; i++ ) {
+ if ( ns[ n[i] ] == null )
+ ns[ n[i] ] = { rows: new Array(), o: null };
+ ns[ n[i] ].rows.push( i );
+ }
+
+ for ( var i = 0; i < o.length; i++ ) {
+ if ( os[ o[i] ] == null )
+ os[ o[i] ] = { rows: new Array(), n: null };
+ os[ o[i] ].rows.push( i );
+ }
+
+ for ( var i in ns ) {
+ if ( ns[i].rows.length == 1 && typeof(os[i]) != "undefined" && os[i].rows.length == 1 ) {
+ n[ ns[i].rows[0] ] = { text: n[ ns[i].rows[0] ], row: os[i].rows[0] };
+ o[ os[i].rows[0] ] = { text: o[ os[i].rows[0] ], row: ns[i].rows[0] };
+ }
+ }
+
+ for ( var i = 0; i < n.length - 1; i++ ) {
+ if ( n[i].text != null && n[i+1].text == null && n[i].row + 1 < o.length && o[ n[i].row + 1 ].text == null &&
+ n[i+1] == o[ n[i].row + 1 ] ) {
+ n[i+1] = { text: n[i+1], row: n[i].row + 1 };
+ o[n[i].row+1] = { text: o[n[i].row+1], row: i + 1 };
+ }
+ }
+
+ for ( var i = n.length - 1; i > 0; i-- ) {
+ if ( n[i].text != null && n[i-1].text == null && n[i].row > 0 && o[ n[i].row - 1 ].text == null &&
+ n[i-1] == o[ n[i].row - 1 ] ) {
+ n[i-1] = { text: n[i-1], row: n[i].row - 1 };
+ o[n[i].row-1] = { text: o[n[i].row-1], row: i - 1 };
+ }
+ }
+
+ return { o: o, n: n };
+}
View
159 public/javascripts/ben/main.js.old
@@ -0,0 +1,159 @@
+ $(".participant").show();
+ $(".essay").hide();
+ $(".correction").hide();
+ setInterval( "updateStats()", 60000 );
+ $(document).ready(function(){
+
+ function generate_box(span) {
+ span.className = "correctme unmodified";
+
+ console.log(span);
+ var original_text = $(span).html();
+
+ //clear it
+ $(span).html("");
+
+ var input = document.createElement("input")
+ input.type = "text";
+ input.value = original_text;
+ input.size = input.value.length*1.2;
+
+ var correct_answer = input.getAttribute('rel');
+
+ input.state = function() {
+ /*
+ Given a span like:
+ <span class='correctme' rel='correct string'>original string<\/span>
+
+ Tells us whether the string modified by the user is
+ - correct
+ - modified, but reverted to the original
+ - no change (un touched at all by the user)
+ - modifies, and returns difference
+ */
+ var current_value = input.value;
+
+ if(input.modified) {
+ if(current_value == correct_answer) {
+ return { status: "correct", msg: correct_answer, style_class: "state_correct" }
+ }
+ else if(current_value == original_text) {
+ return {status: "incorrect - reverted to original", msg: "modified but returned to normal", style_class: "state_reverted"}
+ }
+ else {
+ // find the differnce between original and difference
+ // using the diffString Algorithm
+ var difference = diffString(original_text, current_value);
+
+ // modified, return difference
+ return {status: "incorrect - modified", msg: difference, style_class: "state_modified"}
+ }
+
+ }else {
+ return { status: "incorrect - no change", msg: current_value, style_class: "state_no_change"};
+ }
+ }
+
+ var change_function = function() {
+
+ // remember that the field was modified
+ input.modified = true;
+
+ // timeout 10ms so we can read the input value for changes
+ setTimeout(function() {
+ span.className = "correctme modified";
+
+ if(input.value == original_text) {
+ span.className = "correctme unmodified";
+
+ }
+
+ },10);
+ }
+
+ // handle change events
+ input.onkeyup = change_function;
+ input.onchange = change_function;
+
+
+ span.appendChild(input);
+
+ }
+
+ $(".essay span.correctme").each(function(){
+ generate_box(this);
+ });
+
+ $("span.correctme input").change(function() {
+ var correct_me_id = $(this).closest("span").attr('id');
+ var corrected = $(this).val()
+ var uncorrected = $(this).closest("span").attr('rel');
+ var essay = $(this).closest("div").attr("id");
+
+ send_correction($(".participant #number").val(),essay,correct_me_id, uncorrected, corrected );
+ });
+
+
+ $(".participant .continue").click(function(){
+ $(".essay").show();
+ $(".participant").hide();
+ $("#user h2 span").html( $(".participant #number").val());
+ });
+
+ $(".essay .continue").click(function(){
+ $(".essay").hide();
+ $(".correction").show();
+
+
+ // clear it
+ $(".correction .result").html("");
+
+ // show the fields entered
+ var list = document.createElement("ol");
+
+ $(".essay span.correctme input").each(function(){
+
+ // Creates a report of the differences and corrected items
+
+ var list_item = document.createElement("li");
+ var result_string = "";
+ var result = this.state();
+
+ result_string = "<span class='status " + result.style_class + "'>" + result.status + "<\/span><span class='message'>" + result.msg + "<\/span>";
+
+ $(list_item).html( result_string );
+ list.appendChild(list_item);
+
+ // You could imagine saving the results here
+ });
+
+ $(".correction .result")[0].appendChild(list);
+ });
+
+
+ $(".correction .continue").click(function(){
+
+ $(".correction").hide();
+ $(".participant").show();
+ });
+
+ });
+ // sends it all to the back end. user is create or found by participant, locations are set by the essay ID then the field ID , what the text was supposed to be what it was sent and if that is right.
+ function send_correction (participant, essay, id, uncorrected, corrected, correct, number_changed_in_quota ) {
+ var params = { "participant_id":participant, "response":{"essay":essay,"id":id, "uncorrected":uncorrected , "corrected":corrected , "correct":correct } };
+ var str = jQuery.param(params);
+
+ $.ajax({
+ type: 'POST',
+ url: "responses",
+ data: str
+ });
+ }
+
+ function updateStats () {
+ $.fancybox({
+ "users/stats" : responseText
+ });
+ }
+ </script>
+ <script type="text/javascript">
View
149 public/javascripts/ben/phd.js
@@ -0,0 +1,149 @@
+
+
+// Setup the back button warning:
+
+/*
+window.onbeforeunload = function() {
+ return 'Hitting the back button will break this experiment, and is disabled';
+}
+*/
+
+var TIME_LIMIT_IN_MINUTES = 20;
+
+window.participant_id = undefined;
+window.group_id = undefined;
+
+
+$(document).ready(function() {
+
+ //Group and participant ID
+ $(".participant").modal({
+ close:false,
+ overlayId: 'simplemodal-overlay',
+ containerId: 'simplemodal-container',
+ onShow: function (dialog) {
+ var modal = this;
+ $(".participant").show();
+
+ // if the user clicks "yes"
+ $('.participant .button').click(function () {
+ // clear error message
+ $('.participant .error').html("");
+
+ // close the dialog
+ window.participant_id = $('.participant #participant_id').val();
+ window.group_id = $('.participant #group_id').val();
+
+ if(window.participant_id && window.group_id && window.group_id.match(/^\d\d*$/)
+ && window.participant_id.match(/^\d\d*$/)) {
+
+ modal.close();
+ // move on to the next step..
+
+
+ // HACK: setTimeout because we can only have one modal dialog
+ // at a time
+ setTimeout(function(){
+ window.show_instructions();
+ },10);
+
+
+ }else {
+ var error = "You must enter a valid group id and participant id"
+ $('.participant .error').html(error);
+ if(window.console){
+ window.console.error(error)
+ }
+ }
+ });
+ }
+ });
+
+ // Add instructions
+ window.show_instructions= function() {
+ var timer_started = false;
+ $('.instructions').modal({
+ close:true,
+ overlayClose:true,
+ overlayId: 'instructions-overlay',
+ containerId: 'instructions-container',
+ onClose: function(){
+ if(!timer_started){
+ window.start_timer();
+ timer_started=true;
+ }
+ this.close();
+ }
+ });
+ }
+
+ $(".show_instructions").click(function(event){
+ event.stopPropagation();
+
+ show_instructions();
+ return false;
+ });
+
+
+ //TODO: have a way to do the handler
+
+
+ // add click handlers for all the individual essays
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ // timer related functions and variables
+ var timer = null;
+ var seconds = 0;
+ window.start_timer = function(){
+ window.stop_timer();
+
+ timer = setInterval(function(){
+ seconds +=1;
+
+ var minutes_to_render = parseInt(seconds / 60)
+ var seconds_to_render = parseInt(seconds % 60)
+
+ var spacer = '0';
+
+ if(seconds_to_render>9){
+ spacer = ''
+ }
+
+ // render the seconds
+ $(".timer").html(minutes_to_render + ":" + spacer + seconds_to_render);
+
+ if(minutes_to_render == TIME_LIMIT_IN_MINUTES){
+ window.stop_timer();
+ window.quit({'timeout' : true});
+ }
+
+ },1000)
+
+ };
+
+ window.stop_timer = function(){
+ if(timer){
+ clearInterval(timer)
+ }
+ }
+
+
+
+ // Handler for .ready() called.
+});
View
698 public/javascripts/jquery/simple_modal.js
@@ -0,0 +1,698 @@
+/*
+ * SimpleModal 1.4.1 - jQuery Plugin
+ * http://www.ericmmartin.com/projects/simplemodal/
+ * Copyright (c) 2010 Eric Martin (http://twitter.com/ericmmartin)
+ * Dual licensed under the MIT and GPL licenses
+ * Revision: $Id: jquery.simplemodal.js 261 2010-11-05 21:16:20Z emartin24 $
+ */
+
+/**
+ * SimpleModal is a lightweight jQuery plugin that provides a simple
+ * interface to create a modal dialog.
+ *
+ * The goal of SimpleModal is to provide developers with a cross-browser
+ * overlay and container that will be populated with data provided to
+ * SimpleModal.
+ *
+ * There are two ways to call SimpleModal:
+ * 1) As a chained function on a jQuery object, like $('#myDiv').modal();.
+ * This call would place the DOM object, #myDiv, inside a modal dialog.
+ * Chaining requires a jQuery object. An optional options object can be
+ * passed as a parameter.
+ *
+ * @example $('<div>my data</div>').modal({options});
+ * @example $('#myDiv').modal({options});
+ * @example jQueryObject.modal({options});
+ *
+ * 2) As a stand-alone function, like $.modal(data). The data parameter
+ * is required and an optional options object can be passed as a second
+ * parameter. This method provides more flexibility in the types of data
+ * that are allowed. The data could be a DOM object, a jQuery object, HTML
+ * or a string.
+ *
+ * @example $.modal('<div>my data</div>', {options});
+ * @example $.modal('my data', {options});
+ * @example $.modal($('#myDiv'), {options});
+ * @example $.modal(jQueryObject, {options});
+ * @example $.modal(document.getElementById('myDiv'), {options});
+ *
+ * A SimpleModal call can contain multiple elements, but only one modal
+ * dialog can be created at a time. Which means that all of the matched
+ * elements will be displayed within the modal container.
+ *
+ * SimpleModal internally sets the CSS needed to display the modal dialog
+ * properly in all browsers, yet provides the developer with the flexibility
+ * to easily control the look and feel. The styling for SimpleModal can be
+ * done through external stylesheets, or through SimpleModal, using the
+ * overlayCss, containerCss, and dataCss options.
+ *
+ * SimpleModal has been tested in the following browsers:
+ * - IE 6, 7, 8, 9
+ * - Firefox 2, 3, 4
+ * - Opera 9, 10
+ * - Safari 3, 4, 5
+ * - Chrome 1, 2, 3, 4, 5, 6
+ *
+ * @name SimpleModal
+ * @type jQuery
+ * @requires jQuery v1.2.4
+ * @cat Plugins/Windows and Overlays
+ * @author Eric Martin (http://ericmmartin.com)
+ * @version 1.4.1
+ */
+;(function ($) {
+ var ie6 = $.browser.msie && parseInt($.browser.version) === 6 && typeof window['XMLHttpRequest'] !== 'object',
+ ie7 = $.browser.msie && parseInt($.browser.version) === 7,
+ ieQuirks = null,
+ w = [];
+
+ /*
+ * Create and display a modal dialog.
+ *
+ * @param {string, object} data A string, jQuery object or DOM object
+ * @param {object} [options] An optional object containing options overrides
+ */
+ $.modal = function (data, options) {
+ return $.modal.impl.init(data, options);
+ };
+
+ /*
+ * Close the modal dialog.
+ */
+ $.modal.close = function () {
+ $.modal.impl.close();
+ };
+
+ /*
+ * Set focus on first or last visible input in the modal dialog. To focus on the last
+ * element, call $.modal.focus('last'). If no input elements are found, focus is placed
+ * on the data wrapper element.
+ */
+ $.modal.focus = function (pos) {
+ $.modal.impl.focus(pos);
+ };
+
+ /*
+ * Determine and set the dimensions of the modal dialog container.
+ * setPosition() is called if the autoPosition option is true.
+ */
+ $.modal.setContainerDimensions = function () {
+ $.modal.impl.setContainerDimensions();
+ };
+
+ /*
+ * Re-position the modal dialog.
+ */
+ $.modal.setPosition = function () {
+ $.modal.impl.setPosition();
+ };
+
+ /*
+ * Update the modal dialog. If new dimensions are passed, they will be used to determine
+ * the dimensions of the container.
+ *
+ * setContainerDimensions() is called, which in turn calls setPosition(), if enabled.
+ * Lastly, focus() is called is the focus option is true.
+ */
+ $.modal.update = function (height, width) {
+ $.modal.impl.update(height, width);
+ };
+
+ /*
+ * Chained function to create a modal dialog.
+ *
+ * @param {object} [options] An optional object containing options overrides
+ */
+ $.fn.modal = function (options) {
+ return $.modal.impl.init(this, options);
+ };
+
+ /*
+ * SimpleModal default options
+ *
+ * appendTo: (String:'body') The jQuery selector to append the elements to. For .NET, use 'form'.
+ * focus: (Boolean:true) Focus in the first visible, enabled element?
+ * opacity: (Number:50) The opacity value for the overlay div, from 0 - 100
+ * overlayId: (String:'simplemodal-overlay') The DOM element id for the overlay div
+ * overlayCss: (Object:{}) The CSS styling for the overlay div
+ * containerId: (String:'simplemodal-container') The DOM element id for the container div
+ * containerCss: (Object:{}) The CSS styling for the container div
+ * dataId: (String:'simplemodal-data') The DOM element id for the data div
+ * dataCss: (Object:{}) The CSS styling for the data div
+ * minHeight: (Number:null) The minimum height for the container
+ * minWidth: (Number:null) The minimum width for the container
+ * maxHeight: (Number:null) The maximum height for the container. If not specified, the window height is used.
+ * maxWidth: (Number:null) The maximum width for the container. If not specified, the window width is used.
+ * autoResize: (Boolean:false) Automatically resize the container if it exceeds the browser window dimensions?
+ * autoPosition: (Boolean:true) Automatically position the container upon creation and on window resize?
+ * zIndex: (Number: 1000) Starting z-index value
+ * close: (Boolean:true) If true, closeHTML, escClose and overClose will be used if set.
+ If false, none of them will be used.
+ * closeHTML: (String:'<a class="modalCloseImg" title="Close"></a>') The HTML for the default close link.
+ SimpleModal will automatically add the closeClass to this element.
+ * closeClass: (String:'simplemodal-close') The CSS class used to bind to the close event
+ * escClose: (Boolean:true) Allow Esc keypress to close the dialog?
+ * overlayClose: (Boolean:false) Allow click on overlay to close the dialog?
+ * position: (Array:null) Position of container [top, left]. Can be number of pixels or percentage
+ * persist: (Boolean:false) Persist the data across modal calls? Only used for existing
+ DOM elements. If true, the data will be maintained across modal calls, if false,
+ the data will be reverted to its original state.
+ * modal: (Boolean:true) User will be unable to interact with the page below the modal or tab away from the dialog.
+ If false, the overlay, iframe, and certain events will be disabled allowing the user to interact
+ with the page below the dialog.
+ * onOpen: (Function:null) The callback function used in place of SimpleModal's open
+ * onShow: (Function:null) The callback function used after the modal dialog has opened
+ * onClose: (Function:null) The callback function used in place of SimpleModal's close
+ */
+ $.modal.defaults = {
+ appendTo: 'body',
+ focus: true,
+ opacity: 50,
+ overlayId: 'simplemodal-overlay',
+ overlayCss: {},
+ containerId: 'simplemodal-container',
+ containerCss: {},
+ dataId: 'simplemodal-data',
+ dataCss: {},
+ minHeight: null,
+ minWidth: null,
+ maxHeight: null,
+ maxWidth: null,
+ autoResize: false,
+ autoPosition: true,
+ zIndex: 1000,
+ close: true,
+ closeHTML: '<a class="modalCloseImg" title="Close"></a>',
+ closeClass: 'simplemodal-close',
+ escClose: true,
+ overlayClose: false,
+ position: null,
+ persist: false,
+ modal: true,
+ onOpen: null,
+ onShow: null,
+ onClose: null
+ };
+
+ /*
+ * Main modal object
+ * o = options
+ */
+ $.modal.impl = {
+ /*
+ * Contains the modal dialog elements and is the object passed
+ * back to the callback (onOpen, onShow, onClose) functions
+ */
+ d: {},
+ /*
+ * Initialize the modal dialog
+ */
+ init: function (data, options) {
+ var s = this;
+
+ // don't allow multiple calls
+ if (s.d.data) {
+ return false;
+ }
+
+ // $.boxModel is undefined if checked earlier
+ ieQuirks = $.browser.msie && !$.boxModel;
+
+ // merge defaults and user options
+ s.o = $.extend({}, $.modal.defaults, options);
+
+ // keep track of z-index
+ s.zIndex = s.o.zIndex;
+
+ // set the onClose callback flag
+ s.occb = false;
+
+ // determine how to handle the data based on its type
+ if (typeof data === 'object') {
+ // convert DOM object to a jQuery object
+ data = data instanceof jQuery ? data : $(data);
+ s.d.placeholder = false;
+
+ // if the object came from the DOM, keep track of its parent
+ if (data.parent().parent().size() > 0) {
+ data.before($('<span></span>')
+ .attr('id', 'simplemodal-placeholder')
+ .css({display: 'none'}));
+
+ s.d.placeholder = true;
+ s.display = data.css('display');
+
+ // persist changes? if not, make a clone of the element
+ if (!s.o.persist) {
+ s.d.orig = data.clone(true);
+ }
+ }
+ }
+ else if (typeof data === 'string' || typeof data === 'number') {
+ // just insert the data as innerHTML
+ data = $('<div></div>').html(data);
+ }
+ else {
+ // unsupported data type!
+ alert('SimpleModal Error: Unsupported data type: ' + typeof data);
+ return s;
+ }
+
+ // create the modal overlay, container and, if necessary, iframe
+ s.create(data);
+ data = null;
+
+ // display the modal dialog
+ s.open();
+
+ // useful for adding events/manipulating data in the modal dialog
+ if ($.isFunction(s.o.onShow)) {
+ s.o.onShow.apply(s, [s.d]);
+ }
+
+ // don't break the chain =)
+ return s;
+ },
+ /*
+ * Create and add the modal overlay and container to the page
+ */
+ create: function (data) {
+ var s = this;
+
+ // get the window properties
+ w = s.getDimensions();
+
+ // add an iframe to prevent select options from bleeding through
+ if (s.o.modal && ie6) {
+ s.d.iframe = $('<iframe src="javascript:false;"></iframe>')
+ .css($.extend(s.o.iframeCss, {
+ display: 'none',
+ opacity: 0,
+ position: 'fixed',
+ height: w[0],
+ width: w[1],
+ zIndex: s.o.zIndex,
+ top: 0,
+ left: 0
+ }))
+ .appendTo(s.o.appendTo);
+ }
+
+ // create the overlay
+ s.d.overlay = $('<div></div>')
+ .attr('id', s.o.overlayId)
+ .addClass('simplemodal-overlay')
+ .css($.extend(s.o.overlayCss, {
+ display: 'none',
+ opacity: s.o.opacity / 100,
+ height: s.o.modal ? w[0] : 0,
+ width: s.o.modal ? w[1] : 0,
+ position: 'fixed',
+ left: 0,
+ top: 0,
+ zIndex: s.o.zIndex + 1
+ }))
+ .appendTo(s.o.appendTo);
+
+ // create the container
+ s.d.container = $('<div></div>')
+ .attr('id', s.o.containerId)
+ .addClass('simplemodal-container')
+ .css($.extend(s.o.containerCss, {
+ display: 'none',
+ position: 'fixed',
+ zIndex: s.o.zIndex + 2
+ }))
+ .append(s.o.close && s.o.closeHTML
+ ? $(s.o.closeHTML).addClass(s.o.closeClass)
+ : '')
+ .appendTo(s.o.appendTo);
+
+ s.d.wrap = $('<div></div>')
+ .attr('tabIndex', -1)
+ .addClass('simplemodal-wrap')
+ .css({height: '100%', outline: 0, width: '100%'})
+ .appendTo(s.d.container);
+
+ // add styling and attributes to the data
+ // append to body to get correct dimensions, then move to wrap
+ s.d.data = data
+ .attr('id', data.attr('id') || s.o.dataId)
+ .addClass('simplemodal-data')
+ .css($.extend(s.o.dataCss, {
+ display: 'none'
+ }))
+ .appendTo('body');
+ data = null;
+
+ s.setContainerDimensions();
+ s.d.data.appendTo(s.d.wrap);
+
+ // fix issues with IE
+ if (ie6 || ieQuirks) {
+ s.fixIE();
+ }
+ },
+ /*
+ * Bind events
+ */
+ bindEvents: function () {
+ var s = this;
+
+ // bind the close event to any element with the closeClass class
+ $('.' + s.o.closeClass).bind('click.simplemodal', function (e) {
+ e.preventDefault();
+ s.close();
+ });
+
+ // bind the overlay click to the close function, if enabled
+ if (s.o.modal && s.o.close && s.o.overlayClose) {
+ s.d.overlay.bind('click.simplemodal', function (e) {
+ e.preventDefault();
+ s.close();
+ });
+ }
+
+ // bind keydown events
+ $(document).bind('keydown.simplemodal', function (e) {
+ if (s.o.modal && e.keyCode === 9) { // TAB
+ s.watchTab(e);
+ }
+ else if ((s.o.close && s.o.escClose) && e.keyCode === 27) { // ESC
+ e.preventDefault();
+ s.close();
+ }
+ });
+
+ // update window size
+ $(window).bind('resize.simplemodal', function () {
+ // redetermine the window width/height
+ w = s.getDimensions();
+
+ // reposition the dialog
+ s.o.autoResize ? s.setContainerDimensions() : s.o.autoPosition && s.setPosition();
+
+ if (ie6 || ieQuirks) {
+ s.fixIE();
+ }
+ else if (s.o.modal) {
+ // update the iframe & overlay
+ s.d.iframe && s.d.iframe.css({height: w[0], width: w[1]});
+ s.d.overlay.css({height: w[0], width: w[1]});
+ }
+ });
+ },
+ /*
+ * Unbind events
+ */
+ unbindEvents: function () {
+ $('.' + this.o.closeClass).unbind('click.simplemodal');
+ $(document).unbind('keydown.simplemodal');
+ $(window).unbind('resize.simplemodal');
+ this.d.overlay.unbind('click.simplemodal');
+ },
+ /*
+ * Fix issues in IE6 and IE7 in quirks mode
+ */
+ fixIE: function () {
+ var s = this, p = s.o.position;
+
+ // simulate fixed position - adapted from BlockUI
+ $.each([s.d.iframe || null, !s.o.modal ? null : s.d.overlay, s.d.container], function (i, el) {
+ if (el) {
+ var bch = 'document.body.clientHeight', bcw = 'document.body.clientWidth',
+ bsh = 'document.body.scrollHeight', bsl = 'document.body.scrollLeft',
+ bst = 'document.body.scrollTop', bsw = 'document.body.scrollWidth',
+ ch = 'document.documentElement.clientHeight', cw = 'document.documentElement.clientWidth',
+ sl = 'document.documentElement.scrollLeft', st = 'document.documentElement.scrollTop',
+ s = el[0].style;
+
+ s.position = 'absolute';
+ if (i < 2) {
+ s.removeExpression('height');
+ s.removeExpression('width');
+ s.setExpression('height','' + bsh + ' > ' + bch + ' ? ' + bsh + ' : ' + bch + ' + "px"');
+ s.setExpression('width','' + bsw + ' > ' + bcw + ' ? ' + bsw + ' : ' + bcw + ' + "px"');
+ }
+ else {
+ var te, le;
+ if (p && p.constructor === Array) {
+ var top = p[0]
+ ? typeof p[0] === 'number' ? p[0].toString() : p[0].replace(/px/, '')
+ : el.css('top').replace(/px/, '');
+ te = top.indexOf('%') === -1
+ ? top + ' + (t = ' + st + ' ? ' + st + ' : ' + bst + ') + "px"'
+ : parseInt(top.replace(/%/, '')) + ' * ((' + ch + ' || ' + bch + ') / 100) + (t = ' + st + ' ? ' + st + ' : ' + bst + ') + "px"';
+
+ if (p[1]) {
+ var left = typeof p[1] === 'number' ? p[1].toString() : p[1].replace(/px/, '');
+ le = left.indexOf('%') === -1
+ ? left + ' + (t = ' + sl + ' ? ' + sl + ' : ' + bsl + ') + "px"'
+ : parseInt(left.replace(/%/, '')) + ' * ((' + cw + ' || ' + bcw + ') / 100) + (t = ' + sl + ' ? ' + sl + ' : ' + bsl + ') + "px"';
+ }
+ }
+ else {
+ te = '(' + ch + ' || ' + bch + ') / 2 - (this.offsetHeight / 2) + (t = ' + st + ' ? ' + st + ' : ' + bst + ') + "px"';
+ le = '(' + cw + ' || ' + bcw + ') / 2 - (this.offsetWidth / 2) + (t = ' + sl + ' ? ' + sl + ' : ' + bsl + ') + "px"';
+ }
+ s.removeExpression('top');
+ s.removeExpression('left');
+ s.setExpression('top', te);
+ s.setExpression('left', le);
+ }
+ }
+ });
+ },
+ /*
+ * Place focus on the first or last visible input
+ */
+ focus: function (pos) {
+ var s = this, p = pos && $.inArray(pos, ['first', 'last']) !== -1 ? pos : 'first';
+
+ // focus on dialog or the first visible/enabled input element
+ var input = $(':input:enabled:visible:' + p, s.d.wrap);
+ setTimeout(function () {
+ input.length > 0 ? input.focus() : s.d.wrap.focus();
+ }, 10);
+ },
+ getDimensions: function () {
+ var el = $(window);
+
+ // fix a jQuery/Opera bug with determining the window height
+ var h = $.browser.opera && $.browser.version > '9.5' && $.fn.jquery < '1.3'
+ || $.browser.opera && $.browser.version < '9.5' && $.fn.jquery > '1.2.6'
+ ? el[0].innerHeight : el.height();
+
+ return [h, el.width()];
+ },
+ getVal: function (v, d) {
+ return v ? (typeof v === 'number' ? v
+ : v === 'auto' ? 0
+ : v.indexOf('%') > 0 ? ((parseInt(v.replace(/%/, '')) / 100) * (d === 'h' ? w[0] : w[1]))
+ : parseInt(v.replace(/px/, '')))
+ : null;
+ },
+ /*
+ * Update the container. Set new dimensions, if provided.
+ * Focus, if enabled. Re-bind events.
+ */
+ update: function (height, width) {
+ var s = this;
+
+ // prevent update if dialog does not exist
+ if (!s.d.data) {
+ return false;
+ }
+
+ // reset orig values
+ s.d.origHeight = s.getVal(height, 'h');
+ s.d.origWidth = s.getVal(width, 'w');
+
+ // hide data to prevent screen flicker
+ s.d.data.hide();
+ height && s.d.container.css('height', height);
+ width && s.d.container.css('width', width);
+ s.setContainerDimensions();
+ s.d.data.show();
+ s.o.focus && s.focus();
+
+ // rebind events
+ s.unbindEvents();
+ s.bindEvents();
+ },
+ setContainerDimensions: function () {
+ var s = this,
+ badIE = ie6 || ie7;
+
+ // get the dimensions for the container and data
+ var ch = s.d.origHeight ? s.d.origHeight : $.browser.opera ? s.d.container.height() : s.getVal(badIE ? s.d.container[0].currentStyle['height'] : s.d.container.css('height'), 'h'),
+ cw = s.d.origWidth ? s.d.origWidth : $.browser.opera ? s.d.container.width() : s.getVal(badIE ? s.d.container[0].currentStyle['width'] : s.d.container.css('width'), 'w'),
+ dh = s.d.data.outerHeight(true), dw = s.d.data.outerWidth(true);
+
+ s.d.origHeight = s.d.origHeight || ch;
+ s.d.origWidth = s.d.origWidth || cw;
+
+ // mxoh = max option height, mxow = max option width
+ var mxoh = s.o.maxHeight ? s.getVal(s.o.maxHeight, 'h') : null,
+ mxow = s.o.maxWidth ? s.getVal(s.o.maxWidth, 'w') : null,
+ mh = mxoh && mxoh < w[0] ? mxoh : w[0],
+ mw = mxow && mxow < w[1] ? mxow : w[1];
+
+ // moh = min option height
+ var moh = s.o.minHeight ? s.getVal(s.o.minHeight, 'h') : 'auto';
+ if (!ch) {
+ if (!dh) {ch = moh;}
+ else {
+ if (dh > mh) {ch = mh;}
+ else if (s.o.minHeight && moh !== 'auto' && dh < moh) {ch = moh;}
+ else {ch = dh;}
+ }
+ }
+ else {
+ ch = s.o.autoResize && ch > mh ? mh : ch < moh ? moh : ch;
+ }
+
+ // mow = min option width
+ var mow = s.o.minWidth ? s.getVal(s.o.minWidth, 'w') : 'auto';
+ if (!cw) {
+ if (!dw) {cw = mow;}
+ else {
+ if (dw > mw) {cw = mw;}
+ else if (s.o.minWidth && mow !== 'auto' && dw < mow) {cw = mow;}
+ else {cw = dw;}
+ }
+ }
+ else {
+ cw = s.o.autoResize && cw > mw ? mw : cw < mow ? mow : cw;
+ }
+
+ s.d.container.css({height: ch, width: cw});
+ s.d.wrap.css({overflow: (dh > ch || dw > cw) ? 'auto' : 'visible'});
+ s.o.autoPosition && s.setPosition();
+ },
+ setPosition: function () {
+ var s = this, top, left,
+ hc = (w[0]/2) - (s.d.container.outerHeight(true)/2),
+ vc = (w[1]/2) - (s.d.container.outerWidth(true)/2);
+
+ if (s.o.position && Object.prototype.toString.call(s.o.position) === '[object Array]') {
+ top = s.o.position[0] || hc;
+ left = s.o.position[1] || vc;
+ } else {
+ top = hc;
+ left = vc;
+ }
+ s.d.container.css({left: left, top: top});
+ },
+ watchTab: function (e) {
+ var s = this;
+
+ if ($(e.target).parents('.simplemodal-container').length > 0) {
+ // save the list of inputs
+ s.inputs = $(':input:enabled:visible:first, :input:enabled:visible:last', s.d.data[0]);
+
+ // if it's the first or last tabbable element, refocus
+ if ((!e.shiftKey && e.target === s.inputs[s.inputs.length -1]) ||
+ (e.shiftKey && e.target === s.inputs[0]) ||
+ s.inputs.length === 0) {
+ e.preventDefault();
+ var pos = e.shiftKey ? 'last' : 'first';
+ s.focus(pos);
+ }
+ }
+ else {
+ // might be necessary when custom onShow callback is used
+ e.preventDefault();
+ s.focus();
+ }
+ },
+ /*
+ * Open the modal dialog elements
+ * - Note: If you use the onOpen callback, you must "show" the
+ * overlay and container elements manually
+ * (the iframe will be handled by SimpleModal)
+ */
+ open: function () {
+ var s = this;
+ // display the iframe
+ s.d.iframe && s.d.iframe.show();
+
+ if ($.isFunction(s.o.onOpen)) {
+ // execute the onOpen callback
+ s.o.onOpen.apply(s, [s.d]);
+ }
+ else {
+ // display the remaining elements
+ s.d.overlay.show();
+ s.d.container.show();
+ s.d.data.show();
+ }
+
+ s.o.focus && s.focus();
+
+ // bind default events
+ s.bindEvents();
+ },
+ /*
+ * Close the modal dialog
+ * - Note: If you use an onClose callback, you must remove the
+ * overlay, container and iframe elements manually
+ *
+ * @param {boolean} external Indicates whether the call to this
+ * function was internal or external. If it was external, the
+ * onClose callback will be ignored
+ */
+ close: function () {
+ var s = this;
+
+ // prevent close when dialog does not exist
+ if (!s.d.data) {
+ return false;
+ }
+
+ // remove the default events
+ s.unbindEvents();
+
+ if ($.isFunction(s.o.onClose) && !s.occb) {
+ // set the onClose callback flag
+ s.occb = true;
+
+ // execute the onClose callback
+ s.o.onClose.apply(s, [s.d]);
+ }
+ else {
+ // if the data came from the DOM, put it back
+ if (s.d.placeholder) {
+ var ph = $('#simplemodal-placeholder');
+ // save changes to the data?
+ if (s.o.persist) {
+ // insert the (possibly) modified data back into the DOM
+ ph.replaceWith(s.d.data.removeClass('simplemodal-data').css('display', s.display));
+ }
+ else {
+ // remove the current and insert the original,
+ // unmodified data back into the DOM
+ s.d.data.hide().remove();
+ ph.replaceWith(s.d.orig);
+ }
+ }
+ else {
+ // otherwise, remove it
+ s.d.data.hide().remove();
+ }
+
+ // remove the remaining elements
+ s.d.container.hide().remove();
+ s.d.overlay.hide();
+ s.d.iframe && s.d.iframe.hide().remove();
+ setTimeout(function(){
+ // opera work-around
+ s.d.overlay.remove();
+
+ // reset the dialog object
+ s.d = {};
+ }, 10);
+ }
+ }
+ };
+})(jQuery);
View
54 public/stylesheets/modal.css
@@ -0,0 +1,54 @@
+/*
+ * SimpleModal Basic Modal Dialog
+ * http://www.ericmmartin.com/projects/simplemodal/
+ * http://code.google.com/p/simplemodal/
+ *
+ * Copyright (c) 2010 Eric Martin - http://ericmmartin.com
+ *
+ * Licensed under the MIT license:
+ * http://www.opensource.org/licenses/mit-license.php
+ *
+ * Revision: $Id: basic.css 257 2010-07-27 23:06:56Z emartin24 $
+ */
+
+#basic-modal-content {display:none;}
+
+/* Overlay */
+#simplemodal-overlay {background-color:#000; cursor:wait;}
+
+/* Container */
+#simplemodal-container {height:300px; width:200px; color:black; background-color:white; border:4px solid #444; padding:12px;}
+#simplemodal-container .simplemodal-data {padding:8px;}
+#simplemodal-container code {background:#141414; border-left:3px solid #65B43D; color:#bbb; display:block; font-size:12px; margin-bottom:12px; padding:4px 6px 6px;}
+#simplemodal-container a {color:#ddd;}
+#simplemodal-container a.modalCloseImg {background:url(../img/basic/x.png) no-repeat; width:25px; height:29px; display:inline; z-index:3200; position:absolute; top:-15px; right:-16px; cursor:pointer;}
+#simplemodal-container h3 {color:#84b8d9;}
+
+#simplemodal-container input {
+ height:30px;
+ width:150px;
+ padding:10px;
+ margin:10px;
+}
+
+#simplemodal-container .button {
+
+}
+
+
+#simplemodal-container .error {
+ height: 20px;
+ display:block;
+}
+
+/* instructions overlay */
+/* Overlay */
+#instructions-overlay {background-color:#000; cursor:wait;}
+
+/* Container */
+#instructions-container {height:400px; width:480px; color:black; background-color:white; border:4px solid #444; padding:12px;}
+#instructions-container .simplemodal-data {padding:8px;}
+#instructions-container code {background:#141414; border-left:3px solid #65B43D; color:#bbb; display:block; font-size:12px; margin-bottom:12px; padding:4px 6px 6px;}
+#instructions-container a {color:#ddd;}
+#instructions-container a.modalCloseImg {background:url(/images/x.png) no-repeat; width:25px; height:29px; display:inline; z-index:3200; position:absolute; top:-15px; right:-16px; cursor:pointer;}
+#instructions-container h3 {color:#84b8d9;}
View
17 public/stylesheets/screen.css
@@ -0,0 +1,17 @@
+a.modalCloseImg {
+ background:url(/images/x.png) no-repeat; /* adjust url as required */
+ width:25px;
+ height:29px;
+ display:inline;
+ z-index:3200;
+ position:absolute;
+ top:-15px;
+ right:-18px;
+ cursor:pointer;
+}
+
+
+/* start hidden */
+.instructions{display:none;}
+.participant{display:none;}
+/*

No commit comments for this range

Something went wrong with that request. Please try again.