X Module fully refactored

create_account.html

@@ -9,13 +9,19 @@
 <tr><td colspan=3 align=center
 style="color:red;"><div id="enroll_error"
 name="enroll_error"></div></td></tr>
-<tr><td align=right>Username</td><td><input name="username"
-id="ca_username" type="text"> </td><td></span> </td></tr>
 <tr><td align=right>E-mail</td><td><input name="email" id="ca_email"
 type="text"> </td><td></td></tr>
 <tr><td align=right>Password</td><td><input name="password"
 id="ca_password" type="password"> </td><td></td></tr>
 
+<tr><td align=right>Public Name</td><td><input name="username"
+id="ca_username" type="text"> </td><td><span class="ui-icon ui-icon-help" id="spinner_nick" style="display:inline-block;"></td></tr>
+<tr><td colspan=3 align=center><div style="display:none"
+id="sregion_nick">Nickname you'd like to use on forums. We recommend
+some variant of your real name (e.g. first name, last initial), but we
+allow you to be fully anonymous as well. </div></td></tr>
+
+
 <tr><td align=right>Full name</td><td><input name="name" id="ca_name" type="input">  </td><td><span class="ui-icon ui-icon-help" id="spinner_name" style="display:inline-block;"></td></tr>
 <tr><td colspan=3 align=center><div style="display:none" id="sregion_name">If you would
 like us to give you a certificate of completion at the end, we need

problem.html

@@ -35,5 +35,3 @@
 % else:
   <input id="check_${ id }" type="button" value="Reset" >
 % endif
-
-<!--$("[id^=input_resistor_]");-->

profile.html

 <%inherit file="main.html" />
 
+<script>
+$(function() {
+	$("a#inline").fancybox({
+		'hideOnContentClick': false
+	});
+})
+</script>
+
 <div align="right"><table><tr><td align=right valign=top><a href="/courseware">Digital Textbook</a> 
 <span class="ui-icon ui-icon-bullet" style="display:inline-block;"></span> 
 <a href="/discussion">Discussion</a> 
@@ -13,24 +21,57 @@
 <center>
 <br><br><br><br>
 <h1> ${name} </h1>
-<table><td align=right>Username:</td><td>${username}</td></tr>
+<table><td align=right>Forum name:</td><td>${username}</td></tr>
 <td align=right>E-mail:</td><td>${email}</td></tr>
-<td align=right>Location:</td><td>${location}</td></tr>
-<td align=right>Language:</td><td>${language}</td></tr></table>
+<td align=right><a id="inline" href="#change_location">Location:</a></td><td><a id="inline" href="#change_location">${location}</a></td></tr>
+<td align=right><a id="inline" href="#change_language">Language:</a></td><td><a id="inline" href="#change_location">${language}</a></td></tr>
+<td align=right><a id="inline" href="#change_password">Password:</a></td><td><a id="inline" href="#change_location">********</a></td></tr></table>
 <h1> Course Status </h1>
 <table>
   % for hw in homeworks:
-    <td> ${ hw['chapter'] }</td><td>/</td> <td> ${ hw['section'] } </td><td>&nbsp;</td><td>
+    <tr><td> ${ hw['chapter'] }</td><td>/</td> <td> ${ hw['section'] } </td><td>&nbsp;</td><td>
     % for score in hw['scores']:
       ${ score[0] }/${ score[1] }
     % endfor
-    </td>
+    </td></tr>
   % endfor
 </table>
 </center>
-<br><br><br><br><br><br><br><br><br><br><br><br>
-<br><br><br><br><br><br><br><br><br><br><br><br>
-<br><br><br><br><br><br><br><br><br><br><br><br>
-<br><br><br><br><br><br><br><br><br><br><br><br>
+
+<div style="display:none" ><div id="change_location"><h1>Change location</h1>
+<table width=400><tr><td> Preferred format is city, state, country (so for us,
+&quot;Cambridge, Massachusetts, USA&quot;), but give as 
+much or as little detail as you want. 
+<p>
+<div align=right>
+<input id="id_loc_text" type="text" name="loc_text" maxlength="75" value="${location}" /> 
+<input type="button" id="change_loc_button" value="Change" /></p>
+</div>
+</td></tr></table>
+</div></div>
+<div style="display:none"><div id="change_language"><h1>Change language</h1>
+<table width=400><tr><td> Update your language:
+<p>
+<div align=right>
+<input id="id_lang_text" type="text" name="lang_text" maxlength="75" value="${language}" /> 
+<input type="button" id="change_lang_button" value="Change" /></p>
+</div>
+</td></tr></table>
+
+</div></div>
+<div style="display:none"><div id="change_password">
+<table width=400><tr><td> <h1>Password reset</h1>
+
+<p>Hit the button below, and we'll e-mail you a password reset link at ${email}.</p>
+
+<p>
+<div align=right>
+<input id="id_email" type="hidden" name="email" maxlength="75" value="${email}" /> 
+<input type="button" id="pwd_change_button" value="E-mail me" /></p>
+</div>
+</td></tr></table>
+
+</div></div>
+
 
 <hr>

seq_module.html

-    <div id='debug' ellpadding=5></div>
     <table width=800 >
-      <tr><td></td><td style="background-color:grey" id="tt_1" height=10></td>
-<td style="background-color:grey" id="tt_2"></td>
-<td style="background-color:grey" id="tt_3"></td>
-<td style="background-color:grey" id="tt_4"></td>
-<td style="background-color:grey" id="tt_5"></td>
-<td style="background-color:grey" id="tt_6"></td>
-<td style="background-color:grey" id="tt_7"></td>
-<td style="background-color:grey" id="tt_8"></td>
-<td style="background-color:grey" id="tt_9"></td>
-<td style="background-color:grey" id="tt_10"></td><td></td></tr>
+      <tr><td></td>
+% for t in range(1,1+len(items)):
+<td style="background-color:grey" id="tt_${ t }" height=10></td>
+% endfor
+
+<td></td></tr>
 <tr><td align=center valign=center><div id="prev"><span class="ui-icon ui-icon-circle-triangle-w" onclick="pause();"></span></div></td>
-<td colspan=10><div id="content">This is content</div></td>
+<td colspan=10><div id="content"></div></td>
 <td align=center valign=center><div id="next"><span class="ui-icon ui-icon-circle-triangle-e" onclick="pause();">&nbsp;</span></div></td>
 </tr>
       <tr></tr>
     </table>
 
-
-<div>
- %for t in items:
-  <div id="vert-${items.index(t)}">
-  ${t[1]['content']}
-  </div>
- %endfor
-</div>

seq_module.js

@@ -13,15 +13,12 @@ function goto(i) {
 }
 
 function setup_click(i) {
-    $.get(i+'.html', function(data){
-	    files[i]=data;
-        })
         $('#tt_'+i).click(function(eo) { goto(i);});
 }
 
 function next() { 
     loc=loc+1;
-    if(loc>10) loc=10;
+    if(loc> ${ len(items) } ) loc=${ len(items) };
     goto(loc);
 }
 
@@ -38,6 +35,5 @@ $(function() {
 	}
         $('#next').click(function(eo) { next();});
         $('#prev').click(function(eo) { prev();});
+	goto(1);
     });
-
-$('#debug').text('loaded');
\ No newline at end of file

video.html

-    <table>
-      <tr><td rowspan=13 colspan=4>
-    <div id="ytapiplayer">
-      You need Flash player 8+ and JavaScript enabled to view this video.
-    </div>
-    <script type="text/javascript">
-      var params = { allowScriptAccess: "always", bgcolor: "#cccccc" };
-      var atts = { id: "myytplayer" };
-      swfobject.embedSWF("http://www.youtube.com/apiplayer?enablejsapi=1&playerapiid=ytplayer", 
-                         "ytapiplayer", "400", "300", "8", null, null, params, atts);
-    </script>
+<table>
+  <tr><td rowspan=13 colspan=4>
+      <div id="ytapiplayer">
+	You need Flash player 8+ and JavaScript enabled to view this video.
+      </div>
     </td>
 <td width=15>    <span class="" onclick="">&nbsp;</span></td><td colspan=2 id=stt_n5 align=center><div id=std_n5 onclick="title_seek(-5);">&nbsp;</div></td></tr>
 <tr><td width=15><span class="" onclick="">&nbsp;</span></td><td colspan=2 id=stt_n4 align=center><div id=std_n4 onclick="title_seek(-4);">&nbsp;</div></td></tr>

video_init.js

+var params = { allowScriptAccess: "always", bgcolor: "#cccccc" };
+var atts = { id: "myytplayer" };
+swfobject.embedSWF("http://www.youtube.com/apiplayer?enablejsapi=1&playerapiid=ytplayer", 
+		   "ytapiplayer", "400", "300", "8", null, null, params, atts);
 var captions=0;
 $("#slider").slider({slide:function(event,ui){seek_slide('slide',event.originalEvent,ui.value);},
                      stop:function(event,ui){seek_slide('stop',event.originalEvent,ui.value);}});