Permalink
Browse files

Merge pull request #140 from pchen/master

Updates to instruction images and copy.
  • Loading branch information...
2 parents a9a2fd3 + b0dc901 commit 3c0892b7dbade47320bcd6d642a7d736c9ea5e84 @mackrauss mackrauss committed Jun 6, 2012
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
@@ -72,22 +72,8 @@ body {
text-align: right;
}
-/** teacher styles **/
-
-.teacher {
- background: #F3D0D0;
-}
-
-.teacher .foobar {
-
-}
-
/** student styles **/
-.student {
-
-}
-
#loginScreen #statusMsg {
font-size: 1.2em;
margin: 370px auto 100px auto;
@@ -96,20 +82,29 @@ body {
.paper {
padding: 1.5em 50px 30px 50px;
width: 725px;
- margin: 0px auto 50px auto;
- font-size: 1.2em;
+ margin: 0px auto 20px auto;
+ overflow: hidden;
+ font-size: 1em;
position: relative;
- background: #fff url(/assets/img/paperclip.png) no-repeat 12px 0;
+ background: #fff;
-webkit-box-shadow: 0 0 4px rgba(0, 0, 0, 0.2), inset 0 0 50px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0 0 4px rgba(0, 0, 0, 0.2), inset 0 0 50px rgba(0, 0, 0, 0.1);
- box-shadow: 0 0 5px rgba(0, 0, 0, 0.2), inset 0 0 50px rgba(0, 0, 0, 0.1);
+ box-shadow: 0 0 5px rgba(0, 0, 0, 0.2), inset 0 0 50px rgba(0, 0, 0, 0.1);
}
.paper h2 {
margin-top: 0;
text-align: center;
}
+.paper .html-content .pimg {
+ text-align: center;
+}
+
+.paper .html-content .pimg img {
+ max-height: 200px;
+}
+
.paper:before, .paper:after {
position: absolute;
width: 40%;
@@ -320,6 +315,11 @@ body {
.skipButton {
margin-top: 100px;
}
+
+.instruction-msg {
+ font-weight: bold;
+ color: #356d90;
+}
/* END Styles used on all p-***.html pages */
@@ -448,102 +448,88 @@ table.dragAndDropContainer .draggableTags {
}
/* Styles used in : p-checkInBoard.html AND p-taggingEquations.html */
-/* Styles exclusively for: p-taggingProblems.html */
-#taggingProblems .ui-grid-b h2 {
- margin-top: 0.7em;
+/* Shared by taggingProblems and taggingEquations */
+
+#taggingProblems .connected-tags,
+#taggingEquations .connected-tags {
+ margin: 0 auto;
+ background-color: #fff;
+ padding: 5px;
+ -webkit-box-shadow: inset 0 0 50px rgba(0, 0, 0, 0.1);
+ -moz-box-shadow: inset 0 0 50px rgba(0, 0, 0, 0.1);
+ box-shadow: inset 0 0 50px rgba(0, 0, 0, 0.1);
}
+#taggingProblems .connected-tags h4,
+#taggingEquations .connected-tags h4 {
+ text-align: center;
+ text-transform: uppercase;
+}
-#taggingProblems .scrollingProblems {
+/* scrolling stuff */
+#taggingProblems .scrollingProblems,
+#taggingEquations .scrollingProblems {
position: relative;
overflow: hidden;
}
-#taggingProblems .attachProblemContainer {
+#taggingProblems .attachProblemContainer,
+#taggingEquations .attachProblemContainer {
float: left;
/*border: 1px solid green;*/
margin-right: 30px;
}
-#taggingProblems .problem {
+#taggingProblems .attachProblemContainer .problem,
+#taggingEquations .attachProblemContainer .problem {
margin: 0 auto;
/*border: 1px solid red;*/
}
+/* scrolling stuff */
-#taggingProblems .paper {
- background-image: none;
- overflow: hidden;
+#taggingProblems .paper,
+#taggingEquations .paper {
width: 100%;
}
-#taggingProblems .paper .html-content .pimg {
- text-align: center;
-}
-
-#taggingProblems .connected-tags {
+#taggingProblems .instructions-border,
+#taggingEquations .instructions-border {
+ border-top: 1px dashed #ccc;
margin-top: 20px;
- width: 90%;
- margin: 0 auto;
}
-#taggingProblems #connected-tags ul {
- width: 46%;
- margin: 0 2%;
- float: left;
-}
-
-#taggingProblems .ui-li-thumb {
- margin: 10px 10px 0 10px;
- max-height: none;
- max-width: none;
-}
-/* END Styles exclusively for: p-taggingProblems.html */
+/* END Shared by taggingProblems and taggingEquations */
/* Styles exclusively for: p-taggingProblems.html */
-#taggingEquations .ui-grid-b h2 {
- margin-top: 0.7em;
-}
-
-
-#taggingEquations .scrollingProblems {
- position: relative;
- overflow: hidden;
-}
-
-#taggingEquations .attachProblemContainer {
+#taggingProblems ul.principlesList {
float: left;
- /*border: 1px solid green;*/
- margin-right: 30px;
+ width: 30%;
+ margin-left: 5%;
+ margin-right: 5%;
}
-#taggingEquations .problem {
- margin: 0 auto;
- /*border: 1px solid red;*/
+#taggingProblems ul.principlesList li {
+ margin-bottom: 10px;
}
-#taggingEquations .paper {
- background-image: none;
- overflow: hidden;
- width: 100%;
+#taggingProblems ul.equationsList {
+ list-style: none inside;
+ float: left;
+ width: 60%;
}
-#taggingEquations .paper .html-content .pimg {
- text-align: center;
+#taggingProblems ul.equationsList li {
+ margin-bottom: 10px;
}
+/* END Styles exclusively for: p-taggingProblems.html */
-#taggingEquations .connected-tags {
- margin-top: 20px;
- width: 90%;
- margin: 0 auto;
-}
-#taggingEquations #connected-tags ul {
- width: 46%;
- margin: 0 2%;
- float: left;
+/* Styles exclusively for: p-taggingEquations.html */
+#taggingEquations table.dragAndDropContainer {
+ margin: 10px auto 20px auto;
}
-/* END Styles exclusively for: p-taggingProblems.html */
+/* END Styles exclusively for: p-taggingEquations.html */
/* Styles exclusively for: p-variableWriter.html */
label .label-extra {
@@ -30,6 +30,7 @@ NEOplace.Tablet.Student = (function(Tablet) {
self.allProblemSets = {};
//set UI_TESTING_ONLY to true when developing the UI without backend integration, should be set to false when deploying
+ //var UI_TESTING_ONLY = true;
var UI_TESTING_ONLY = false;
console.log( "ATTN: UI_TESTING_ONLY is set to " + UI_TESTING_ONLY );
// If set to false, remember to uncomment this line from the .html files
@@ -177,12 +178,12 @@ NEOplace.Tablet.Student = (function(Tablet) {
if ( !UI_TESTING_ONLY ) {
eq.name += Sail.app.config.assets.url;
}else{
- eq.name += "/assets";
+ eq.name += '/assets';
}
if ( size === 10 ) {
- eq.name += self.allEquations[id].img10 + '" alt="" />';
+ eq.name += self.allEquations[id].img10 + '" alt="eq" />';
}else{
- eq.name += self.allEquations[id].img20 + '" alt="" />';
+ eq.name += self.allEquations[id].img20 + '" alt="eq" />';
}
return eq;
});
@@ -245,7 +246,7 @@ NEOplace.Tablet.Student = (function(Tablet) {
_.each( problem.principles, function(principle){
principlesList += "<li>"+principle+"</li>";
});
- jQuery('#'+id+' .principlesList').html(principlesList).listview("refresh");
+ jQuery('#'+id+' .principlesList').html(principlesList); //.listview("refresh");
}else{
jQuery('#'+id+' .principlesList').replaceWith("");
}
@@ -258,7 +259,7 @@ NEOplace.Tablet.Student = (function(Tablet) {
_.each( equations, function(equation){
equationsList += "<li>"+equation.name+"</li>";
});
- jQuery('#'+id+' .equationsList').html(equationsList).listview("refresh");
+ jQuery('#'+id+' .equationsList').html(equationsList); //.listview("refresh");
}else{
equations = self.parseEquationIdsIntoImgTag(problem.equation_ids,10);
@@ -41,11 +41,12 @@
<div class="text-align-center message">
<p>You have been assigned to a group and a video board.</p>
<p><img src="/assets/img/smartboard_gather.png" width="300" height="200" alt="student in front of smartboard" /></p>
-
</div>
- <div class="text-align-center signInInstructions">
- <p>Tap the 'Sign In' button when you are there.</p>
+ <br />
+
+ <div class="text-align-center instruction-msg">
+ <p>When you are at the board, tap the 'Sign In' button below.</p>
<a href="#" data-role="button" data-theme="b" class="videoBoardSignInButton">Sign In</a>
</div>
@@ -39,13 +39,14 @@
<br /><br />
<p>On the <strong>videoboard</strong>,<br />work with your group to sort the principles <br />that were submitted by your peers during the last step.</p>
- <p>What principles apply to the challenge question you have been given?</p>
+ <p>What principles apply to the <em>Challenge Question</em> you have been given?</p>
<br />
<img src="/assets/img/principle_sorting.png" width="700" height="300" alt="" />
- <p>Once you are finished sorting, click "Done Sorting" on the video board.</p>
+ <br />
+ <p class="instruction-msg">Once you are finished sorting, click "Done Sorting" on the video board.</p>
</div>
<!-- for UI_TESTING_ONLY -->
@@ -1,52 +0,0 @@
-<html>
-<head>
- <title>NEOplace - Smartroom Activity</title>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
-
- <!-- <link rel="stylesheet" type="text/css" href="js/sail.js/css/sail.css" /> -->
- <link rel="stylesheet" type="text/css" href="css/jquery.mobile-1.1.0.css"/>
- <link rel="stylesheet" type="text/css" href="css/neoplace.tablet.css" />
-
- <script src="js/sail.js/sail.js" type="text/javascript"></script>
- <script type="text/javascript">
- Sail.load()
- .then('js/jquery.mobile.init.js')
- .then('js/sail.js/rollcall.js', 'js/jquery.mobile-1.1.0.js')
- .then('js/jquery.mobile.toast.js')
- .then('js/jquery-ui-1.8.20.dragdrop.min.js')
- .then('js/jquery.ui.touch-punch.js')
- .then('js/neoplace.tablet.js')
- .then('js/neoplace.tablet.student.js')
- .then('http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML')
- //TODO: comment out UI_TESTING_ONLY = false, otherwise keep uncommented
- //.thenRun(function() { return Sail.init(NEOplace.Tablet.Student); });
- </script>
-</head>
-<body class="student">
-
- <!-- START sortProblems -->
- <div d="sortProblems" data-role="page" data-theme="c">
-
- <div data-role="header" data-theme="a" >
- <a href="/smartroom/tablet/" data-ajax="false" data-icon="alert" data-iconpos="notext" data-theme="b" title="Reload"></a>
- <h1>NEOplace - Hollywood Physics</h1>
- </div>
-
- <div data-role="content">
- <div class="text-align-center">
- <img src="/assets/img/problem_sorting.png" />
- <p>[? Instructions ?]</p>
- </div>
-
- <!-- for UI_TESTING_ONLY -->
- <!-- style="display:none;" -->
- <a href="p-sortPrinciplesBoard.html" data-role="button" data-theme="b" class="doneButton" class="ui-disabled">Continue</a>
-
- </div>
-
- </div>
- <!-- END sortProblems -->
-
-</body>
-</html>
@@ -1,48 +0,0 @@
-<html>
-<head>
- <title>NEOplace - Smartroom Activity</title>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
-
- <!-- <link rel="stylesheet" type="text/css" href="js/sail.js/css/sail.css" /> -->
- <link rel="stylesheet" type="text/css" href="css/jquery.mobile-1.1.0.css"/>
- <link rel="stylesheet" type="text/css" href="css/neoplace.tablet.css" />
-
- <script src="js/sail.js/sail.js" type="text/javascript"></script>
- <script type="text/javascript">
- Sail.load()
- .then('js/jquery.mobile.init.js')
- .then('js/sail.js/rollcall.js', 'js/jquery.mobile-1.1.0.js')
- .then('js/jquery.mobile.toast.js')
- .then('js/jquery-ui-1.8.20.dragdrop.min.js')
- .then('js/jquery.ui.touch-punch.js')
- .then('js/neoplace.tablet.js')
- .then('js/neoplace.tablet.student.js')
- .then('http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML')
- //TODO: comment out UI_TESTING_ONLY = false, otherwise keep uncommented
- //.thenRun(function() { return Sail.init(NEOplace.Tablet.Student); });
- </script>
-</head>
-<body class="student">
-
- <!-- START sortVariables -->
- <div id="sortVariables" data-role="page" data-theme="c">
-
- <div data-role="header" data-theme="a" >
- <a href="/smartroom/tablet/" data-ajax="false" data-icon="alert" data-iconpos="notext" data-theme="b" title="Reload"></a>
- <h1>NEOplace - Hollywood Physics</h1>
- </div>
-
- <div data-role="content">
- <p class="text-align-center"><img src="http://placehold.it/650x250&amp;text=Wait" width="650" height="240" alt="?" /></p>
- <p class="text-align-center">[?]</p>
- <a data-role="button" data-transition="fade" data-theme="b" href="p-problemPicker.html">
- Continue
- </a>
- </div>
-
- </div>
- <!-- END sortVariables -->
-
-</body>
-</html>
Oops, something went wrong.

0 comments on commit 3c0892b

Please sign in to comment.