coderkun/questlab
1
0
Fork 0
Code Issues 15 Pull requests Projects Releases Wiki Activity

crossword design update & javascript input changes

Browse source
This commit is contained in:
Daniel 2014-04-14 19:20:47 +02:00
commit 0d449bca92
3 changed files with 56 additions and 12 deletions
Download patch file Download diff file Expand all files Collapse all files

30
questtypes/crossword/html/quest.tpl
View file

@ -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>

28
questtypes/crossword/html/submission.tpl
View file

@ -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>

10
www/css/desktop.css
View file

@ -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){