Skip to content

Commit

Permalink
Merge pull request #54 from chrqls/dev
Browse files Browse the repository at this point in the history 
[#39] Birth of a web app for teachers (session values page)
  • Loading branch information
@chrqls
chrqls committed Apr 17, 2014
2 parents 43e7ac9 + ef11ae4 commit 414b089
Show file tree
Hide file tree
Showing 3 changed files with 380 additions and 0 deletions.
2 changes: 2 additions & 0 deletions static/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -72,6 +72,8 @@ <h3>Plugmin Apps</h3>
<h3>SMILE Web Apps</h3>

<p><a class="success button" href="/smile-student.html">SMILE Student Web App 1.0.5 - Click to Join!</a></p>

<p><a class="success button" href="/smile-teacher.html">SMILE Teacher Web App</a></p>
</div>
</div>
</div>
Expand Down
195 changes: 195 additions & 0 deletions static/js/smileteacher.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,195 @@
/**
#
#Copyright (c) 2011-2014 Razortooth Communications, LLC. All rights reserved.
#
#Redistribution and use in source and binary forms, with or without modification,
#are permitted provided that the following conditions are met:
#
# * Redistributions of source code must retain the above copyright notice,
# this list of conditions and the following disclaimer.
#
# * Redistributions in binary form must reproduce the above copyright notice,
# this list of conditions and the following disclaimer in the documentation
# and/or other materials provided with the distribution.
#
# * Neither the name of Razortooth Communications, LLC, nor the names of its
# contributors may be used to endorse or promote products derived from this
# software without specific prior written permission.
#
#THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND
#ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
#WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
#DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR
#ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
#(INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
#LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON
#ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
#(INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS
#SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
**/

var VERSION = '1.0.1';
var SMILESTATE = "1";
var SMILEROUTES = {
"currentmessage": "/smile/currentmessage",
"checkserver": "/smile/",
"createsession": "/smile/createsession"
};


//
// KO Extenders
//
// This adds the required extender for validation
ko.extenders.required = function(target, overrideMessage) {
//add some sub-observables to our observable
target.hasError = ko.observable();
target.validationMessage = ko.observable();

//define a function to do validation
function validate(newValue) {
target.hasError(newValue ? false : true);
target.validationMessage(newValue ? "" : overrideMessage || "This field is required");
}

//initial validation
validate(target());

//validate whenever the value changes
target.subscribe(validate);

//return the original observable
return target;
};


var GlobalViewModel = {
teacher_name: ko.observable(""),
session_name: ko.observable(""),
group_name: ko.observable(""),
hasSubmitted: ko.observable(false),
version: ko.observable(VERSION)
};

GlobalViewModel.doLogin = function() {
var self = this;

if (!self.teacher_name() || self.teacher_name() === "") {

self.teacher_name('Default Teacher');
}
if (!self.session_name() || self.session_name() === "") {

self.session_name('Default Session');
}
if (!self.group_name() || self.group_name() === "") {

self.group_name('Default Group');
}

if (!self.hasSubmitted()) {
console.log('doLogin');
smileAlert('#globalstatus', 'Logging in ('+self.teacher_name()+','+self.teacher_name()+','+self.teacher_name()+')', 'green', 5000);
doSmileLogin();
}

self.hasSubmitted(true);

return false;
}


GlobalViewModel.doLoginReset = function() {

this.teacher_name("");
this.session_name("");
this.group_name("");
this.hasSubmitted(false);

//
// XXX This is silly, fix this, cleanup the object model and reset the state
// For now just reload the page
//
window.location.href = window.location.pathname;
window.location.reload(true);
return false;
}


$(document).ready(function() {

//
// Init Data Model
//
ko.applyBindings(GlobalViewModel);

});

// NEEDED

//
// App functions
//
// alerttype
// - by default, none is required if you don't intend to use lifetime
// - trace : use the stacktrace in the error message
// - red : display a red color alert
// - blue : display a blue color alert
// - green : display a green color alert
//
function smileAlert(targetid, text, alerttype, lifetime) {
var defaultalert = 'secondary';
var redalert = 'alert';
var bluealert = '';
var greenalert = 'success';
var formatstr = '<div class="alert-box %s"> \
%s \
<a href="" class="close">&times;</a> \
</div>';
if (!alerttype) {
alerttype = defaultalert;
} else if (alerttype === 'trace') {
alerttype = redalert;
var trace = printStackTrace();
text = text + ' : ' + trace;
} else if (alerttype === 'red') {
alerttype = redalert;
} else if (alerttype === 'blue') {
alerttype = bluealert;
} else if (alerttype === 'green') {
alerttype = greenalert;
} else {
alerttype = defaultalert;
}
if (targetid) {
$(targetid).append(sprintf(formatstr, alerttype, text));
}
if (lifetime) {
setInterval(function() {
$(targetid).find('.alert-box').fadeOut().remove();
}, lifetime)
}
}

function doSmileLogin() {

var clientip;

$.ajax({
cache: false,
type: "POST",
dataType: "text",
url: SMILEROUTES["createsession"],
data: {"teacherName":GlobalViewModel.teacher_name,"groupName":GlobalViewModel.group_name,"sessionName":GlobalViewModel.session_name},

error: function(xhr, text, err) {
smileAlert('#globalstatus', 'Unable to login. Reason: ' + xhr.status + ':' + xhr.responseText + '. Please verify your connection or server status.', 'trace');
GlobalViewModel.hasSubmitted(false); // Reset this so clicks will work
},
success: function(data) {
smileAlert('#globalstatus', 'Successfully logged in', 'green', 10000);
// Move to state 2 now
SMILESTATE = '2';
}
});
}
183 changes: 183 additions & 0 deletions static/smile-teacher.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,183 @@
<!DOCTYPE html>

<!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
<!--[if lt IE 7]>
<html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]>
<html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]>
<html class="no-js lt-ie9" lang="en"> <![endif]-->
<!--[if gt IE 8]><!-->
<html lang="en">
<!--<![endif]-->
<head>
<meta charset="utf-8" />
<link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon" />

<!-- Set the viewport width to device width for mobile -->
<meta name="viewport" content="width=device-width" />

<title>SMILE Teacher Web</title>

<!-- Included CSS Files -->
<!-- Combine and Compress These CSS Files -->
<link rel="stylesheet" href="css/foundation.css">
<link rel="stylesheet" href="css/app.css">
<link rel="stylesheet" href="css/checkbox-style.css">
<link rel="stylesheet" href="css/rating.css" />
<link rel="stylesheet" href="css/fineuploader-3.5.0.css" />

<script src="js/custom.modernizr.js"></script>

<!-- IE Fix for HTML5 Tags -->
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

</head>
<body>

<!-- container -->
<div class="container">

<div class="row">
<div class="large-12 small-12 columns">
<h2>Welcome to SMILE Teacher Web</h2>
<img src="images/smile.jpg" />
<img src="images/marvell_horiz_logo.jpg" />

<p>SMILE turns a traditional classroom into a highly interactive
learning environment by engaging students in critical reasoning and
problem solving while enabling them to generate, share, and
evaluate multimedia-rich inquiries.</p>
<hr />
</div>
</div>
<div class="row">
<div class="large-9 small-9 columns">
<h3>
SMILE Teacher
<span data-bind="text: version"></span>
</h3>

<div class="row">
<div class="large-8 small-8 columns">
<div id="globalstatus"></div>
</div>
</div>
<div class="row">
<div class="large-12 small-12 columns">
<div class="panel">
<div class="nav-container">
<!-- login-pane1Tab -> start-pane1Tab -> makeq-panelTab -> answerq-panelTab -> results-panelTab -->
<nav>
<div class="section-container vertical-tabs" data-section="vertical-tabs">

<section class="active">

<div class="content" data-slug="login-pane1" data-section-content>
<!-- NICE DEBUG TRICK -->
<!-- KO:<span data-bind="text: ko.toJSON($data)"></span>
<form action="return false;"> -->

<label>Teacher Name</label>
<input data-bind='value: teacher_name, valueUpdate: "afterkeydown"' type="text" placeholder="Teacher Name (default: Default Teacher)" />
<label>Session Name</label>
<input data-bind='value: session_name, valueUpdate: "afterkeydown"' type="text" placeholder="Session Name (default: Default Session)" />
<label>Group Name</label>
<input data-bind='value: group_name, valueUpdate: "afterkeydown"' type="text" placeholder="Group Name (default: Default Group)" />

<ul class="button-group even two-up">
<li>
<a href="#" data-bind='click: doLogin, disable: hasSubmitted'
class="button">Submit</a>
</li>
<li>
<a href="#" data-bind='click: doLoginReset' class="button">Reset</a>
</li>
</ul>
</form>
</div>
</section>

</div>
</nav>
</div>
</div>
</div>
</div>
</div>
<div class="large-3 small-3 columns">
<!-- <div data-bind="with: logindata"> -->
<div id="login-info">
<h4>
Instructions for
<div data-bind="text: ip_server" id="ip_server">Teacher</div>

</h4>

<p><img src="images/jamsj_slim.png" />
</div>
</div>
</div>
<!-- div: row -->
<div class="row">
<div class="small-6 small-centered columns">
<a class="smile-logo regular" href="http://www.smileconsortium.org"></a>
<ul class="smile-links">
<li><a href="mailto:reply+i-23475388-c2457b2df337933075fa1a78843d843cefe305ca-64202@reply.github.com">Support</a></li>
<li><a onclick="alert('Help Not Implemented. Help! visit: https://plus.google.com/u/0/communities/117391182825484902493 for more human support'); return false;" href="#">Help</a></li>
</ul>
<p class="copyright">© 2012‐2013 SMILE Consortium, Inc., a 501c3 Non-Profit</p>
</div>
</div>
<!-- div: row -->
</div>
<!-- container -->


<!-- Included JS Files -->
<!-- Included JS Files -->
<script>
/* document.write('<script src=' +
('__proto__' in {} ? 'js/zepto' : 'js/jquery') +
'.js><\/script>') */
</script>
<script src="js/jquery.js"></script>
<!--
<script src="js/jquery.js"></script>
<script src="js/jquery.foundation.reveal.js"></script>
<script src="js/jquery.foundation.orbit.js"></script>
<script src="js/jquery.foundation.navigation.js"></script>
<script src="js/jquery.foundation.buttons.js"></script>
<script src="js/jquery.foundation.tabs.js"></script>
<script src="js/jquery.foundation.forms.js"></script>
<script src="js/jquery.foundation.tooltips.js"></script>
<script src="js/jquery.foundation.accordion.js"></script>
<script src="js/jquery.placeholder.js"></script>
<script src="js/jquery.foundation.alerts.js"></script>
-->
<!-- End Combine and Compress These JS Files -->
<script src="js/foundation.min.js"></script>
<script src="js/foundation.section.js"></script>
<script src="js/foundation.reveal.js"></script>
<!-- <script src="js/app.js"></script> -->
<!-- Switch to minified version after development -->
<script type='text/javascript' src='js/knockout-2.1.0.debug.js'></script>
<script type='text/javascript' src='js/underscore-1.3.3.js'></script>
<script type='text/javascript' src='js/async-0.1.22.js'></script>
<!-- Got this from: http://www.diveintojavascript.com/projects/javascript-sprintf -->
<script type='text/javascript' src='js/sprintf-0.7-beta1.js'></script>
<script type='text/javascript' src='js/smileteacher.js'></script>
<script type='text/javascript' src='js/stacktrace-min-0.4.js'></script>
<script type='text/javascript' src='js/jquery.blockUI-2.66.0.js'></script>
<script type="text/javascript" src="js/rating.js"></script>
<script type="text/javascript" src="js/jquery.fineuploader-3.5.0.js"></script>
<!-- <script type="text/javascript" src="js/jquery.fineuploader-3.5.0.min.js"></script> -->
<script>
// jQuery.noConflict();
$(document).foundation();
</script>

</body>
</html>

0 comments on commit 414b089

Please sign in to comment.