making small changes to html and css. question: shouldn't the javascript see what date it is and display the content according to it? maybe it would be easier for people to read numbers instead of letters regarding the months, eg: 3 instead of C for march, etc

3 files changed, 149 insertions, 94 deletions

diff --git a/chakra/grade1english.html b/chakra/grade1english.html
index 5e9e0a8..3375a6f 100755
--- a/chakra/grade1english.html
+++ b/chakra/grade1english.html
@@ -26,65 +26,118 @@
 </section>
 
 <section id="middle">
-	<section>
 		<section id="curriculum">
 			<a href="#">Link</a> to subject curriculum.
 		</section>
-		
-		<div id="weekSelectInput">		
-		<label for="weekSelect">Select Week: </label>
-		<select id="weekSelect">
-			<option value="0" selected="selected">&nbsp;--- select week below ---&nbsp;</option>
-			<option value="1to4">1 - 4</option>
-			<option value="5to8">5 - 8</option>
-			<option value="9to12">9 - 12</option>
-			<option value="13to16">13 - 16</option>
-			<option value="17to20">17 - 20</option>
-			<option value="21to24">21 - 24</option>
-			<option value="25to28">25 - 28</option>
-			<option value="29to32">29 - 32</option>
-			<option value="33to36">33 - 36</option>
-			<option value="37to40">37 - 40</option>
-			<option value="41to44">41 - 44</option>
-			<option value="45to48">45 - 48</option>
-			<option value="49to52">49 - 52</option>
-		</select>
-		</div>
-	</section>
 	
-	<section class="middleRow">
-		<ul>
-			<li><a href="#week1">Week 1</a></li>
-			<li><a href="#week2">Week 2</a></li>
-			<li><a href="#week3">Week 3</a></li>
-			<li><a href="#week4">Week 4</a></li>
-		</ul>
-	</section><!-- end weeks -->
-
-	<section id="week1" class="week">
-		<article class="lesson">
-			<header class="lessonName">Quadrilaterals</header>
-			<img src="../assets/images/preview1.jpg" alt="Quadrilaterals" title="Quadrilaterals" />
-		</article>
-		
-		<article class="lesson">
-			<header class="lessonName">Adding up to 10</header>
-			<img src="../assets/images/preview2.jpg"/>
-		</article>
+	    <section id="monthSelect">
+	        <header class="inline">Months</header>
+	        <a href="#weeksA"><img src="../assets/images/month_A.png"/></a>
+	        <a href="#weeksB"><img src="../assets/images/month_B.png"/></a>
+	        <a href="#weeksC"><img src="../assets/images/month_C.png"/></a>
+	        <a href="#weeksD"><img src="../assets/images/month_D.png"/></a>
+	        <a href="#weeksE"><img src="../assets/images/month_E.png"/></a>
+	        <a href="#weeksF"><img src="../assets/images/month_F.png"/></a>
+	        <a href="#weeksG"><img src="../assets/images/month_G.png"/></a>
+	        <a href="#weeksH"><img src="../assets/images/month_H.png"/></a>
+	        <a href="#weeksI"><img src="../assets/images/month_I.png"/></a>
+        	<a href="#weeksJ"><img src="../assets/images/month_J.png"/></a>
+        </section><!-- end monthSelect -->
+
+    <section id="weeksA" class="monthList">
+			<header class="inline">Weeks</header>
+			<a href="#week1"><img src="../assets/images/week1.png"/></a>
+			<a href="#week2"><img src="../assets/images/week2.png"/></a>
+			<a href="#week3"><img src="../assets/images/week3.png"/></a>
+			<a href="#week4"><img src="../assets/images/week4.png"/></a>
+
+			<article id="week1" class="lessonList">
+			    <header>Week 1</header>
+				<div class="lesson">
+				<header class="lessonName">Quadrilaterals</header>
+				<a href="../examples/"><img class="preview" src="../assets/images/preview1.jpg" alt="Quadrilaterals" title="Quadrilaterals" /></a>
+				</div>
+				<div class="lesson">
+				<header class="lessonName">Adding up to 10</header>
+				<a href="../examples/adding_up_to_10/index.html"><img class="preview" src="../assets/images/preview2.jpg" alt="Adding up to 10" title="Adding up to 10" /></a>
+				</div>
+				<div class="lesson">
+				<header class="lessonName">Everyday expressions</header>
+				<a href="../examples/"><img class="preview" src="../assets/images/preview3.jpg" alt="Everyday expressions" title="Everyday expressions" /></a>
+				</div>
+				<div class="lesson">
+				<header class="lessonName">Can and can't</header>
+				<a href="../examples/"><img class="preview" src="../assets/images/preview4.jpg" alt="Can and can't" title="Can and can't" /></a>
+				</div>
+			</article>
 		
-		<article class="lesson">
-			<header class="lessonName">Everyday expressions</header>
-			<img src="../assets/images/preview3.jpg"/>
-		</article>
-
-		<article class="lesson">
-			<header class="lessonName">Can and can't</header>
-			<img src="../assets/images/preview4.jpg"/>
-		</article>
-	</section><!-- end week1 -->
+			<article id="week2" class="lessonList">
+   			    <header>Week 2</header>
+				<div class="lesson">
+				<header class="lessonName">Adding up to 10</header>
+				<a href="../examples/adding_up_to_10/index.html"><img class="preview" src="../assets/images/preview2.jpg" alt="Adding up to 10" title="Adding up to 10" /></a>
+				</div>
+				<div class="lesson">
+				<header class="lessonName">Everyday expressions</header>
+				<a href="../examples/adding_up_to_10/index.html"><img class="preview" src="../assets/images/preview3.jpg" alt="Everyday expressions" title="Everyday expressions" /></a>
+				</div>
+				<div class="lesson">
+				<header class="lessonName">Can and can't</header>
+				<a href="../examples/adding_up_to_10/index.html"><img class="preview" src="../assets/images/preview4.jpg" alt="Can and can't" title="Can and can't" /></a>
+				</div>
+				<div class="lesson">
+				<header class="lessonName">Quadrilaterals</header>
+				<a href="../examples/adding_up_to_10/index.html"><img class="preview" src="../assets/images/preview1.jpg" alt="Quadrilaterals" title="Quadrilaterals" /></a>
+				</div>
+			</article>
+	
+			<article id="week3" class="lessonList">
+   			    <header>Week 3</header>
+				<div class="lesson">
+				<header class="lessonName">Can and can't</header>
+				<a href="../examples/adding_up_to_10/index.html"><img class="preview" src="../assets/images/preview4.jpg" alt="Can and can't" title="Can and can't" /></a>
+				</div>
+				<div class="lesson">
+				<header class="lessonName">Quadrilaterals</header>
+				<a href="../examples/adding_up_to_10/index.html"><img class="preview" src="../assets/images/preview1.jpg" alt="Quadrilaterals" title="Quadrilaterals" /></a>
+				</div>
+				<div class="lesson">
+				<header class="lessonName">Adding up to 10</header>
+				<a href="../examples/adding_up_to_10/index.html"><img class="preview" src="../assets/images/preview2.jpg" alt="Adding up to 10" title="Adding up to 10" /></a>
+				</div>
+				<div class="lesson">
+				<header class="lessonName">Everyday expressions</header>
+				<a href="../examples/adding_up_to_10/index.html"><img class="preview" src="../assets/images/preview3.jpg" alt="Everyday expressions" title="Everyday expressions" /></a>
+				</div>
+			</article>
+			
+			<article id="week4" class="lessonList">
+			    <header>Week 4</header>
+				<div class="lesson">
+				<header class="lessonName">Quadrilaterals</header>
+				<a href="../examples/adding_up_to_10/index.html"><img class="preview" src="../assets/images/preview1.jpg" alt="Quadrilaterals" title="Quadrilaterals" /></a>
+				</div>
+				<div class="lesson">
+				<header class="lessonName">Adding up to 10</header>
+				<a href="../examples/adding_up_to_10/index.html"><img class="preview" src="../assets/images/preview2.jpg" alt="Adding up to 10" title="Adding up to 10" /></a>
+				</div>
+				<div class="lesson">
+				<header class="lessonName">Everyday expressions</header>
+				<a href="../examples/adding_up_to_10/index.html"><img class="preview" src="../assets/images/preview3.jpg" alt="Everyday expressions" title="Everyday expressions" /></a>
+				</div>
+				<div class="lesson">
+				<header class="lessonName">Can and can't</header>
+				<a href="../examples/adding_up_to_10/index.html"><img class="preview" src="../assets/images/preview4.jpg" alt="Can and can't" title="Can and can't" /></a>
+				</div>
+			</article>
+		</section><!-- end weeksA -->
+	    <!-- start #weeksB , second month -->
+	    <!-- end it here -->
+	    <!-- etc etc -->
 </section><!-- end middle -->
 
 <script> 
+/* THIS CODE BELOW IS USELESS - there are no divs named like that anymore! */
 $('#weekSelect').change(function() {
     $('#weeks div').hide();
     var e = '#' + $(':selected', $(this)).attr('value');
diff --git a/chakra/grade1mathematics.html b/chakra/grade1mathematics.html
index e658096..e6f3145 100755
--- a/chakra/grade1mathematics.html
+++ b/chakra/grade1mathematics.html
@@ -19,37 +19,38 @@
 	<nav id="knavbar">
 		<a href="../index.html"><img src="../assets/images/chakra_logo.png" alt="Home" title="Home" class="topNav floatLeft" /></a>
 		<a href="grade1.html"><img src="../assets/images/grade1.png" alt="Grade 1" title="Grade 1" class="topNav floatLeft"/></a>
-		<div id="curriculum"><a href="#">subject curriculum</a></div>
 		<img src="../assets/images/mathematics.png" alt="Mathematics" title="Grade 1 - Mathematics" class="topNav floatLeft" />
 		<img src="../assets/images/help.png" alt="Help" title="Help" class="topNav floatRight" />
 		<img src="../assets/images/karma_logo.png" alt="Karma icon" title="About Karma" class="topNav floatRight" />
 	</nav>
-	<section id="monthSelect">
-	<header class="floatLeft">Months</header>
-	<a href="#weeksA"><img src="../assets/images/month_A.png"/></a>
-	<a href="#weeksB"><img src="../assets/images/month_B.png"/></a>
-	<a href="#weeksC"><img src="../assets/images/month_C.png"/></a>
-	<a href="#weeksD"><img src="../assets/images/month_D.png"/></a>
-	<a href="#weeksE"><img src="../assets/images/month_E.png"/></a>
-	<a href="#weeksF"><img src="../assets/images/month_F.png"/></a>
-	<a href="#weeksG"><img src="../assets/images/month_G.png"/></a>
-	<a href="#weeksH"><img src="../assets/images/month_H.png"/></a>
-	<a href="#weeksI"><img src="../assets/images/month_I.png"/></a>
-	<a href="#weeksJ"><img src="../assets/images/month_J.png"/></a>
-	</section><!-- end monthSelect -->
 </section>
-
+<div id="curriculum"><a href="#">subject curriculum</a></div>
 <section id="middle">
 
+    <section id="monthSelect">
+	    <header class="inline">Months</header>
+	    <a href="#weeksA"><img src="../assets/images/month_A.png"/></a>
+	    <a href="#weeksB"><img src="../assets/images/month_B.png"/></a>
+	    <a href="#weeksC"><img src="../assets/images/month_C.png"/></a>
+	    <a href="#weeksD"><img src="../assets/images/month_D.png"/></a>
+	    <a href="#weeksE"><img src="../assets/images/month_E.png"/></a>
+	    <a href="#weeksF"><img src="../assets/images/month_F.png"/></a>
+	    <a href="#weeksG"><img src="../assets/images/month_G.png"/></a>
+	    <a href="#weeksH"><img src="../assets/images/month_H.png"/></a>
+	    <a href="#weeksI"><img src="../assets/images/month_I.png"/></a>
+    	<a href="#weeksJ"><img src="../assets/images/month_J.png"/></a>
+    </section><!-- end monthSelect -->
+
 	<section id="weeks">
-		<section id="weeksA" class="weekList">
-			<header class="floatLeft">Weeks</header>
+		<section id="weeksA" class="monthList">
+			<header class="inline">Weeks</header>
 			<a href="#week1"><img src="../assets/images/week1.png"/></a>
 			<a href="#week2"><img src="../assets/images/week2.png"/></a>
 			<a href="#week3"><img src="../assets/images/week3.png"/></a>
 			<a href="#week4"><img src="../assets/images/week4.png"/></a>
 
 			<article id="week1" class="lessonList">
+			    <header>Week 1</header>
 				<div class="lesson">
 				<header class="lessonName">Quadrilaterals</header>
 				<a href="../examples/"><img class="preview" src="../assets/images/preview1.jpg" alt="Quadrilaterals" title="Quadrilaterals" /></a>
@@ -69,6 +70,7 @@
 			</article>
 		
 			<article id="week2" class="lessonList">
+			    <header>Week 2</header>
 				<div class="lesson">
 				<header class="lessonName">Adding up to 10</header>
 				<a href="../examples/adding_up_to_10/index.html"><img class="preview" src="../assets/images/preview2.jpg" alt="Adding up to 10" title="Adding up to 10" /></a>
@@ -88,6 +90,7 @@
 			</article>
 	
 			<article id="week3" class="lessonList">
+			    <header>Week 3</header>
 				<div class="lesson">
 				<header class="lessonName">Can and can't</header>
 				<a href="../examples/adding_up_to_10/index.html"><img class="preview" src="../assets/images/preview4.jpg" alt="Can and can't" title="Can and can't" /></a>
@@ -107,6 +110,7 @@
 			</article>
 			
 			<article id="week4" class="lessonList">
+			    <header>Week 4</header>
 				<div class="lesson">
 				<header class="lessonName">Quadrilaterals</header>
 				<a href="../examples/adding_up_to_10/index.html"><img class="preview" src="../assets/images/preview1.jpg" alt="Quadrilaterals" title="Quadrilaterals" /></a>
@@ -125,8 +129,8 @@
 				</div>
 			</article>
 		</section><!-- end weeksA -->
-		<section id="weeksB" class="weekList">
-			<header class="floatLeft">Weeks</header>
+		<section id="weeksB" class="monthList">
+			<header class="inline">Weeks</header>
 			<a href="#week5"><img src="../assets/images/week1.png"/></a>
 			<a href="#week6"><img src="../assets/images/week2.png"/></a>
 			<a href="#week7"><img src="../assets/images/week3.png"/></a>
@@ -163,8 +167,8 @@
 				<header class="lessonName">Week 4 Lessons</header>
 			</article>
 		</section><!-- end weeksB -->
-		<section id="weeksC" class="weekList">
-			<header class="floatLeft">Weeks</header>
+		<section id="weeksC" class="monthList">
+			<header class="inline">Weeks</header>
 			<a href="#week9"><img src="../assets/images/week1.png"/></a>
 			<a href="#week10"><img src="../assets/images/week2.png"/></a>
 			<a href="#week11"><img src="../assets/images/week3.png"/></a>
diff --git a/css/chakra.css b/css/chakra.css
index d09c585..7e2362f 100755
--- a/css/chakra.css
+++ b/css/chakra.css
@@ -56,37 +56,32 @@ header, footer, aside, nav, article, section {
 		margin: 0 auto;
 	}
 
-#monthSelect header {
-	text-align: left;
-	font-size: 1.0em;
-	margin: 5px 0 5px 0;
-	padding-bottom: 2px;
-	font-weight: bold;
-}
-
 #curriculum
 {
 	padding: 5px;
 	background: #ccc;
 	margin: 10px;
-	display: inline;
+	display: block;
+	width: auto;
+	text-align: right;
+	display: none;
+	/* How about putting 'Link to subject curriculum' in the help section ? */
 }
 	
 .topNav {
 	width: 30px;
 	height: 30px;
+	padding: 5px;
 }
 
 .floatLeft {
 	float: left;
-	margin-left: 5px;
-	margin-bottom: 5px;
 }
-
 .floatRight {
 	float: right;
-	margin-right: 5px;
-	margin-bottom: 5px;
+}
+.inline {
+    display: inline;
 }
 
 /* ====================================== */
@@ -177,22 +172,25 @@ header, footer, aside, nav, article, section {
 
 /* ====================================== */
 /* ====== INDIVIDUAL GRADE SECTION ====== */
-#weekSelectInput {
+#monthSelect {
 	text-align: center;
-	border-bottom: 1px solid #666;
-	padding: 5px 0 5px 0;
+	font-size: 1.0em;
+	font-weight: bold;
+    padding: 5px 0 5px 0;
 }
 
-	#weekSelect {
-		list-style: none;
-		text-align: center;
-	}
+.monthList {
+    /* */
+    border-top: 1px solid #666;
+    text-align: center;
+    padding: 5px 0 5px 0;
+}
 
 .lessonList {
-	border-top: 1px solid #666;
 	padding: 1em;
 	margin: 5px 0 5px 0;
 	height: 500px;
+    border-top: 1px dashed #666;
 }
 
 	.lessonName {