From 0d449bca925aa564001bd549fbbf0741627c11e3 Mon Sep 17 00:00:00 2001
From: Daniel <Daniel@Daniel-PC.speedport.ip>
Date: Mon, 14 Apr 2014 19:20:47 +0200
Subject: [PATCH] crossword design update & javascript input changes

---
 questtypes/crossword/html/quest.tpl      | 30 ++++++++++++++++++------
 questtypes/crossword/html/submission.tpl | 28 ++++++++++++++++++----
 www/css/desktop.css                      | 10 ++++++++
 3 files changed, 56 insertions(+), 12 deletions(-)

diff --git a/questtypes/crossword/html/quest.tpl b/questtypes/crossword/html/quest.tpl
index 3965b69c..38c09cc9 100644
--- a/questtypes/crossword/html/quest.tpl
+++ b/questtypes/crossword/html/quest.tpl
@@ -1,4 +1,4 @@
-<form method="post">
+<form method="post" class="crossword">
 	<table>
 		<tbody>
 			<?php foreach(range(0, $maxY) as $y) : ?>
@@ -6,7 +6,8 @@
 				<?php foreach(range(0, $maxX) as $x) : ?>
 				<td>
 					<?php if(array_key_exists($x, $matrix) && array_key_exists($y, $matrix[$x]) && !is_null($matrix[$x][$y])) : ?>
-					<input type="text" name="answers[<?=$x?>][<?=$y?>]" maxlength="1" size="1" placeholder="<?=implode('/',$matrix[$x][$y]['indices'])?>" value="<?=(!is_null($matrix[$x][$y]['answer'])) ? $matrix[$x][$y]['answer'] : ''?>" />	
+					<span class="index"><?=implode('/',$matrix[$x][$y]['indices'])?></span>
+					<input type="text" name="answers[<?=$x?>][<?=$y?>]" maxlength="1" size="1" value="<?=(!is_null($matrix[$x][$y]['answer'])) ? $matrix[$x][$y]['answer'] : ''?>" />	
 					<?php endif ?>
 				</td>
 				<?php endforeach ?>
@@ -14,13 +15,28 @@
 			<?php endforeach ?>
 		</tbody>
 	</table>
-	
-	<ul>
+	<ol>
 		<?php foreach($words as &$word) : ?>
 		<li><?=$word['question']?></li>
 		<?php endforeach ?>
-	</ul>
-	
-	<br /><br />
+	</ol>
 	<input type="submit" name="submit" value="<?=_('solve')?>" />
 </form>
+<script type="text/javascript">
+$('input:text').bind("keyup", function(e) {
+	var n = $("input:text").length;
+	if(e.which == 8 || e.which == 46) {
+		var nextIndex = $('input:text').index(this) - 1;
+		var del = 1;
+	}
+	else {
+		var nextIndex = $('input:text').index(this) + 1;
+	}
+	if(nextIndex < n) {
+		$('input:text')[nextIndex].focus();
+		if(del == 1) {
+			$('input:text')[nextIndex].value = '';
+		}
+	}
+});
+</script>
diff --git a/questtypes/crossword/html/submission.tpl b/questtypes/crossword/html/submission.tpl
index 60f239c3..00b8a4dc 100644
--- a/questtypes/crossword/html/submission.tpl
+++ b/questtypes/crossword/html/submission.tpl
@@ -1,4 +1,4 @@
-<form method="post">
+<form method="post" class="crossword">
 	<table>
 		<tbody>
 			<?php foreach(range(0, $maxY) as $y) : ?>
@@ -6,7 +6,8 @@
 				<?php foreach(range(0, $maxX) as $x) : ?>
 				<td>
 					<?php if(array_key_exists($x, $matrix) && array_key_exists($y, $matrix[$x]) && !is_null($matrix[$x][$y])) : ?>
-					<input type="text" name="answers[<?=$x?>][<?=$y?>]" maxlength="1" size="1" disabled="disabled" style="background-color:<?=($matrix[$x][$y]['right']) ? 'green' : 'red'?>" placeholder="<?=implode('/',$matrix[$x][$y]['indices'])?>" value="<?=(!is_null($matrix[$x][$y]['answer'])) ? $matrix[$x][$y]['answer'] : ''?>" />	
+					<span class="index"><?=implode('/',$matrix[$x][$y]['indices'])?></span>
+					<input type="text" name="answers[<?=$x?>][<?=$y?>]" maxlength="1" size="1" disabled="disabled" style="background-color:<?=($matrix[$x][$y]['right']) ? 'green' : 'red'?>" value="<?=(!is_null($matrix[$x][$y]['answer'])) ? $matrix[$x][$y]['answer'] : ''?>" />	
 					<?php endif ?>
 				</td>
 				<?php endforeach ?>
@@ -14,10 +15,27 @@
 			<?php endforeach ?>
 		</tbody>
 	</table>
-	
-	<ul>
+	<ol>
 		<?php foreach($words as &$word) : ?>
 		<li><?=$word['question']?></li>
 		<?php endforeach ?>
-	</ul>
+	</ol>
 </form>
+<script type="text/javascript">
+$('input:text').bind("keyup", function(e) {
+	var n = $("input:text").length;
+	if(e.which == 8 || e.which == 46) {
+		var nextIndex = $('input:text').index(this) - 1;
+		var del = 1;
+	}
+	else {
+		var nextIndex = $('input:text').index(this) + 1;
+	}
+	if(nextIndex < n) {
+		$('input:text')[nextIndex].focus();
+		if(del == 1) {
+			$('input:text')[nextIndex].value = '';
+		}
+	}
+});
+</script>
diff --git a/www/css/desktop.css b/www/css/desktop.css
index e469b212..de6671e7 100644
--- a/www/css/desktop.css
+++ b/www/css/desktop.css
@@ -172,6 +172,16 @@ input[type="submit"][disabled]{text-shadow:1px 2px #d48c4e;background:#f9ac69;bo
 .gquests .date{color:#aca8a1;display:block}
 .gquests .xp{display:block}
 
+
+/** Quest Types **/
+
+.crossword table{width:100%;max-width:800px;border-spacing:2px;border-collapse:separate}
+.crossword td{background:#d7d4cf;padding:1px}
+.crossword input[type=text]{text-align:center;height:26px;width:100%;min-width:8px;max-width:40px;margin:0;padding:0;border:none;text-transform:uppercase}
+.crossword ol{list-style-type:decimal;list-style-position:inside}
+.crossword li{margin-top:20px}
+.crossword .index{position:absolute;font-size:0.625em;color:#c9c7c4;margin:-3px 0 0 2px}
+
 /** Media Queries **/
 
 @media only screen and (min-width:480px){