You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
502 lines
15 KiB
502 lines
15 KiB
<?php // $Id: exporthtml_snakes.php,v 1.1.2.4 2011/07/23 08:45:05 bdaloukas Exp $
|
|
/**
|
|
* This page export the game snakes to html
|
|
*
|
|
* @author bdaloukas
|
|
* @version $Id: exporthtml_snakes.php,v 1.1.2.4 2011/07/23 08:45:05 bdaloukas Exp $
|
|
* @package game
|
|
**/
|
|
|
|
?>
|
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
|
<html xmlns="http://www.w3.org/1999/xhtml">
|
|
<head>
|
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
|
<title><?php echo $html->title;?></title>
|
|
|
|
<link href="css/game.css" rel="stylesheet" type="text/css" />
|
|
|
|
<link rel="stylesheet" type="text/css" href="css/subModal.css" />
|
|
<script type="text/javascript" src="js/common.js"></script>
|
|
<script type="text/javascript" src="js/subModal.js"></script>
|
|
|
|
<style type="text/css">
|
|
#pawn
|
|
{
|
|
position:absolute;
|
|
}
|
|
img
|
|
{
|
|
border:hidden
|
|
}
|
|
body
|
|
{
|
|
background: #999 url('images/backdropJungle.png') no-repeat fixed left top;
|
|
}
|
|
.score
|
|
{color: #FC3;
|
|
font-size: 40px;
|
|
}
|
|
</style>
|
|
|
|
</head>
|
|
|
|
|
|
|
|
<body>
|
|
|
|
<script language="JavaScript">
|
|
//Snakes for Moodle by Maria Rigkou
|
|
|
|
var boards = 1;
|
|
var board_images = new Array( boards);
|
|
var board_names = new Array( boards);
|
|
var pawn_width = new Array(boards);
|
|
var pawn_height = new Array(boards);
|
|
var board_cols = new Array(boards);
|
|
var board_rows = new Array(boards);
|
|
var board_contents = new Array (boards);
|
|
var board_headerx = new Array(boards);
|
|
var board_headery = new Array(boards);
|
|
var board_footerx = new Array(boards);
|
|
var board_footery = new Array(boards);
|
|
var board_width = new Array(boards);
|
|
var board_height = new Array(boards);
|
|
var board_data = new Array(boards);
|
|
var pawn_width = new Array(boards);
|
|
var pawn_height = new Array(boards);
|
|
|
|
var current_board = 0;
|
|
var current_position=0;
|
|
var current_quest = 0;
|
|
var mchoice_count = 0;
|
|
var mchoice_positions =new Array( 1);
|
|
|
|
var quest_text = ""; //Question
|
|
var quest_resp = ""; // Answer
|
|
var quest_feedb = ""; // feedback
|
|
var quest_total = 25; // Count of questions
|
|
|
|
board_names[ 0] = "<?php echo $board->name; ?>";
|
|
board_images[ 0] = '<?php echo $board->fileboard; ?>';
|
|
board_cols [0] = <?php echo $board->cols; ?>;
|
|
board_rows [0] = <?php echo $board->rows; ?>;
|
|
board_contents [0] = '<?php echo $board->data; ?>';
|
|
board_headerx [0] = <?php echo $board->headerx; ?>;
|
|
board_headery [0] = <?php echo $board->headery; ?>;
|
|
board_footerx [0] = <?php echo $board->footerx; ?>;
|
|
board_footery [0] = <?php echo $board->footery; ?>;
|
|
board_width [0] = <?php echo $board->width; ?>;
|
|
board_height [0] = <?php echo $board->height; ?>;
|
|
pawn_width [0] = 40;
|
|
pawn_height [0]= 40;
|
|
|
|
<?php
|
|
|
|
echo "var countofquestionsM=$countofquestionsM;\r\n";
|
|
echo 'var countofquestionsS='.count($questionsS).";\r\n";
|
|
|
|
foreach( $questionsS as $line)
|
|
{
|
|
$s = $line->question.'#'.str_replace( array( '"', '#'), array( "'", ' '), $line->answer);
|
|
if( $questionsM != '')
|
|
$questionsM .= ",\r";
|
|
$questionsM .= '"'.base64_encode( game_upper( $s)).'"';
|
|
|
|
$s = '#'.str_replace( array( '"', '#'), array( "'", ' '), $line->feedback);
|
|
if( $retfeedback != '')
|
|
$retfeedback .= ",\r";
|
|
$retfeedback .= '"'.base64_encode( $s).'"';
|
|
}
|
|
$rettimesasked = '';
|
|
for($i=0;$i<$countofquestionsM+count($questionsS);$i++)
|
|
$rettimesasked .= ',0';
|
|
$rettimesasked = substr( $rettimesasked, 1);
|
|
|
|
echo "var questions=new Array( $questionsM);\r\n";
|
|
echo "var feedbacks=new Array( $retfeedback);\r\n";
|
|
echo "var quest_times_asked=new Array( $rettimesasked);//How many times is used a question\r\n";
|
|
|
|
?>
|
|
var current_dice=0;
|
|
var feedb_correct_S = "<?php print_string( 'html_snakes_correct', 'game'); ?>";
|
|
var feedb_wrong_S = "<?php print_string( 'html_snakes_wrong', 'game'); ?>";
|
|
var str_score = "<?php print_string( 'score', 'game'); ?>";
|
|
var str_check = "<?php print_string( 'html_snakes_check', 'game'); ?>";
|
|
var str_no_selection = "<?php print_string( 'html_snakes_no_selection', 'game'); ?>";
|
|
|
|
var correct_ans = 0; //counter of correct answers
|
|
var all_ans = 0; //counter of all answers
|
|
var score = 0;
|
|
|
|
ShowMainForm();
|
|
display_quest();
|
|
|
|
function ShowMainForm()
|
|
{
|
|
var pawn_x =0;
|
|
var pawn_y=0;
|
|
var direction=0;
|
|
var cols = board_cols[current_board];
|
|
var rows = board_rows[current_board];
|
|
var col_width = (board_width[current_board]-board_headerx[current_board]-board_footerx[current_board])/cols;
|
|
var col_height = (board_height[current_board]-board_headery[current_board]-board_footery[current_board])/rows;
|
|
|
|
document.write('<img id="boardimage" src="images/meter.png">');
|
|
document.getElementById("boardimage").src = "images/" + board_images[ current_board];
|
|
document.write('<div id="dicecont"> </div>');
|
|
|
|
if( current_position >= 0)
|
|
{
|
|
direction=Math.floor((current_position /cols))%2;
|
|
if (direction==1)
|
|
axis_x=(cols-(current_position %cols)-1);
|
|
else
|
|
axis_x=current_position %cols;
|
|
|
|
axis_y=Math.floor((current_position /rows));
|
|
pawn_x=board_headerx[current_board]+(axis_x*col_width)+(col_width-pawn_width[current_board])/2;
|
|
pawn_y=board_footery[current_board]+pawn_height[current_board]+(axis_y*col_height)+(col_height-pawn_height[current_board])/2;
|
|
|
|
document.write('<div id="pawn1"><img id="pawn" alt="" src="images/player1.png"></div>');
|
|
move_pawn();
|
|
}
|
|
}
|
|
|
|
function selectBoard()
|
|
{
|
|
current_board = document.getElementById("boardtype").value;
|
|
document.getElementById("boardimage").src = "images/" + board_images[ current_board];
|
|
}
|
|
|
|
function select_quest()
|
|
{
|
|
var quest_total = countofquestionsM + countofquestionsS;
|
|
var quest_candidates= new Array();
|
|
var i, q;
|
|
|
|
for (i=0;i<3;i++) {
|
|
quest_candidates[i]=Math.floor((Math.random() * quest_total));
|
|
}
|
|
current_quest = quest_candidates[0];
|
|
for (i=1;i<3;i++) {
|
|
if (quest_times_asked[quest_candidates[i]]>quest_times_asked[current_quest])
|
|
current_quest=quest_candidates[i];
|
|
}
|
|
|
|
q=Base64decode( questions[ current_quest]);
|
|
quest_resp = decode_multiple_choice( q);
|
|
quest_text = quest_resp[ 0];
|
|
quest_feedb = Base64decode( feedbacks[ current_quest]);
|
|
}
|
|
|
|
function IsMultipleChoiceQuestion()
|
|
{
|
|
return (current_quest < countofquestionsM);
|
|
}
|
|
|
|
function check_answer()
|
|
{
|
|
all_ans=all_ans+1;
|
|
if( IsMultipleChoiceQuestion())
|
|
check_answer_M();
|
|
else
|
|
check_answer_S();
|
|
|
|
move_pawn();
|
|
}
|
|
|
|
function check_answer_M()
|
|
{
|
|
document.getElementById("check_btn").style.display = "none";
|
|
|
|
var useranswer;
|
|
var n=document.snakesform.radio_answer.length;
|
|
for(useranswer=0;useranswer < n;useranswer++)
|
|
{
|
|
if( document.snakesform.radio_answer[ useranswer].checked)
|
|
break;
|
|
}
|
|
|
|
if( useranswer >= n)
|
|
{
|
|
alert( str_no_selection);
|
|
document.getElementById("feedb").innerHTML= "";
|
|
document.getElementById("check_btn").style.display = "block";
|
|
return;
|
|
}
|
|
|
|
var feedbacks = decode_multiple_choice(quest_feedb);
|
|
|
|
var j;
|
|
for (j=0;j<n;j++) {
|
|
document.snakesform.radio_answer[ j].disabled = "true";
|
|
}
|
|
|
|
document.getElementById("feedb").innerHTML= feedbacks[ mchoice_positions[useranswer]];
|
|
document.getElementById("feedb").style.display = "block";
|
|
|
|
if ( mchoice_positions[ useranswer] == 1)
|
|
{
|
|
current_position += current_dice;
|
|
correct_ans =correct_ans+1; //calculate new score----
|
|
score = Math.round((correct_ans/all_ans)*100);
|
|
document.getElementById("show_score").innerHTML='<strong>'+str_score+': </strong><strong class="score">' +score+ '</strong>';
|
|
check_game_over();
|
|
check_exists_ladder();
|
|
}
|
|
else
|
|
{
|
|
score = Math.round((correct_ans/all_ans)*100);
|
|
document.getElementById("show_score").innerHTML='<strong>'+str_score+': </strong><strong class="score">' +score+ '</strong>';
|
|
check_exists_snake();
|
|
}
|
|
|
|
document.getElementById("OK_btn").style.display = "block";
|
|
}
|
|
|
|
function check_answer_S()
|
|
{
|
|
document.getElementById("answer").disabled = "true";
|
|
document.getElementById("check_btn").style.display = "none";
|
|
|
|
if (document.getElementById("answer").value.toUpperCase() == quest_resp[ 1].toUpperCase())
|
|
{
|
|
document.getElementById("feedb").style.display = "block";
|
|
current_position += current_dice;
|
|
correct_ans =correct_ans+1; //calculate new score
|
|
score = Math.round((correct_ans/all_ans)*100);
|
|
document.getElementById("show_score").innerHTML='<strong>'+str_score+': </strong><strong class="score">' +score+ '</strong>';
|
|
check_game_over();
|
|
check_exists_ladder();
|
|
}
|
|
else
|
|
{
|
|
document.getElementById("feedb_wrong").style.display = "block";
|
|
score = Math.round((correct_ans/all_ans)*100);
|
|
document.getElementById("show_score").innerHTML='<strong>'+str_score+': </strong><strong class="score">' +score+ '</strong>';
|
|
check_exists_snake();
|
|
}
|
|
|
|
document.getElementById("OK_btn").style.display = "block";
|
|
}
|
|
|
|
function check_game_over()
|
|
{
|
|
var out=(board_cols[current_board]*board_rows[current_board]);
|
|
if (current_position > out-1)
|
|
{
|
|
current_position=out-1;
|
|
showPopWin('modalContent.html', 350, 220, returnRefresh); // modal
|
|
}
|
|
}
|
|
|
|
function check_exists_ladder()
|
|
{
|
|
var find = "L" + (current_position+1) + "-";
|
|
var pos = board_contents[ current_board].indexOf( find);
|
|
|
|
if( pos < 0)
|
|
return;
|
|
|
|
var s = board_contents[ current_board].substr( pos+find.length)
|
|
pos = s.indexOf( ',');
|
|
if( pos >= 0)
|
|
s = s.substr( 0, pos);
|
|
|
|
current_position = s-1;
|
|
}
|
|
|
|
function check_exists_snake()
|
|
{
|
|
var find = "-" + (current_position+1) + ",";
|
|
var s= ',' +board_contents[ current_board] + ',';
|
|
|
|
for(;;)
|
|
{
|
|
var pos = s.indexOf( find);
|
|
|
|
if( pos < 0)
|
|
return;
|
|
|
|
var pos_start = s.lastIndexOf( ',', pos-1);
|
|
|
|
var kind = s.substr( pos_start+1, 1);
|
|
if( kind != "S")
|
|
{
|
|
s = s.substr( pos+1);
|
|
continue;
|
|
}
|
|
s = s.substr( pos_start+2);
|
|
pos = s.indexOf( '-');
|
|
current_position = s.substr( 0, pos)-1;
|
|
break;
|
|
}
|
|
}
|
|
|
|
function decode_multiple_choice(s)
|
|
{
|
|
var ret = new Array();
|
|
|
|
var i=0;
|
|
for(;;)
|
|
{
|
|
var pos=s.indexOf( '#');
|
|
if( pos < 0)
|
|
{
|
|
ret[ i++] = s;
|
|
return ret;
|
|
}
|
|
ret[ i++] = s.substr( 0, pos);
|
|
s = s.substr( pos+1);
|
|
}
|
|
}
|
|
|
|
function display_quest()
|
|
{
|
|
current_dice = Math.floor((Math.random() * 6)) + 1;
|
|
select_quest();
|
|
|
|
if( IsMultipleChoiceQuestion())
|
|
display_quest_M();
|
|
else
|
|
display_quest_S();
|
|
}
|
|
|
|
function display_quest_M()
|
|
{
|
|
s = '<table width="250px"><tr><td><div id="show_dice"> <img src = "images/dice' + current_dice + '.png"> </div> </td><td align=right><div id="show_score" style="color: #FFFFFF; font-weight:bold; font-size: 20px;"><strong>'+str_score+': </strong><strong class="score">' +score+ '</strong></div></td></tr></table>';
|
|
s = s + '<div id="question_area">' + quest_text+'</div>';
|
|
s = s + '<form name="snakesform">';
|
|
|
|
mchoice_count = quest_resp.length-1;
|
|
mchoice_positions = new Array( mchoice_count);
|
|
for(i=0; i < mchoice_count ; i++)
|
|
mchoice_positions[ i] = i+1;
|
|
for(i=0; i < mchoice_count ; i++)
|
|
{
|
|
var j = Math.floor((Math.random() * mchoice_count));
|
|
var temp = mchoice_positions[ i];
|
|
mchoice_positions[ i] = mchoice_positions[ j];
|
|
mchoice_positions[ j] = temp;
|
|
}
|
|
|
|
for(i=0; i < mchoice_count;i++)
|
|
s = s + '<input type="radio" name="radio_answer" id="radio_answer" value="'+i+'" />'+quest_resp[ mchoice_positions[ i]] + '<br />';
|
|
|
|
s = s + '<br /><input type="button" id="check_btn" value="'+str_check+'" onclick="check_answer();"> <br /> <div id="feedb_area"> <div id="feedb_wrong" style="display:none; color:yellow;"> '+quest_feedb+' </div> <br /><div id="feedb" style="display:none; color:yellow;"> '+quest_feedb+'. Θα προχωρήσεις '+current_dice+' τετράγωνα μπροστά!</div><br /> <div id="OK_btn" style="display:none;"><input type="button" onclick="display_quest();" value="OK"/></div> </div></form>';
|
|
|
|
document.getElementById("dicecont").innerHTML = s;
|
|
|
|
document.getElementById("question_area").style.display = "block";
|
|
document.getElementById("check_btn").style.display = "block";
|
|
}
|
|
|
|
function display_quest_S()
|
|
{
|
|
document.getElementById("dicecont").innerHTML = '<table width="250px"><tr><td><div id="show_dice"> <img src = "images/dice' + current_dice + '.png"> </div> </td><td align=right><div id="show_score" style="color: #FFFFFF; font-weight:bold; font-size: 20px;"><strong>'+str_score+': </strong><strong class="score">' +score+ '</strong></div></td></tr></table><div id="question_area">' +quest_text+'</div> <br /><input type="text" id="answer"/><br /><br /> <input type="button" id="check_btn" value="'+str_check+'" onclick="check_answer();"> <br /> <div id="feedb_area"> <div id="feedb_wrong" style="display:none; color:yellow;"> '+feedb_wrong_S+' </div> <div id="feedb" style="display:none; color:yellow;"> '+feedb_correct_S+'</div> <br /><div id="OK_btn" style="display:none;"><input type="button" onclick="display_quest();" value="OK"/></div> </div>';
|
|
|
|
document.getElementById("question_area").style.display = "block";
|
|
document.getElementById("check_btn").style.display = "block";
|
|
}
|
|
|
|
function move_pawn()
|
|
{
|
|
|
|
var pawn_x =0;
|
|
var pawn_y=0;
|
|
var direction=0;
|
|
var cols = board_cols[current_board];
|
|
var rows = board_rows[current_board];
|
|
var col_width = (board_width[current_board]-board_headerx[current_board]-board_footerx[current_board])/cols;
|
|
var col_height = (board_height[current_board]-board_headery[current_board]-board_footery[current_board])/rows;
|
|
|
|
if( current_position >= 0)
|
|
{
|
|
direction=Math.floor((current_position /cols))%2;
|
|
if (direction == 1) {
|
|
axis_x=(cols-(current_position %cols)-1);
|
|
}else
|
|
axis_x=current_position %cols;
|
|
|
|
axis_y=Math.floor((current_position /rows));
|
|
pawn_x=board_headerx[current_board]+(axis_x*col_width)+(col_width-pawn_width[current_board])/2;
|
|
pawn_y=board_footery[current_board]+pawn_height[current_board]+(axis_y*col_height)+(col_height-pawn_height[current_board])/2;
|
|
|
|
document.getElementById("pawn1").style.position='relative';
|
|
document.getElementById("pawn1").style.left=pawn_x+'px';
|
|
document.getElementById("pawn1").style.bottom=pawn_y+'px';
|
|
}
|
|
}
|
|
|
|
function Base64decode(input) {
|
|
var output = "";
|
|
var chr1, chr2, chr3;
|
|
var enc1, enc2, enc3, enc4;
|
|
var i = 0;
|
|
var keyStr="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=";
|
|
|
|
input = input.replace(/[^A-Za-z0-9\+\/\=]/g, "");
|
|
|
|
while (i < input.length) {
|
|
|
|
enc1 = keyStr.indexOf(input.charAt(i++));
|
|
enc2 = keyStr.indexOf(input.charAt(i++));
|
|
enc3 = keyStr.indexOf(input.charAt(i++));
|
|
enc4 = keyStr.indexOf(input.charAt(i++));
|
|
|
|
chr1 = (enc1 << 2) | (enc2 >> 4);
|
|
chr2 = ((enc2 & 15) << 4) | (enc3 >> 2);
|
|
chr3 = ((enc3 & 3) << 6) | enc4;
|
|
|
|
output = output + String.fromCharCode(chr1);
|
|
|
|
if (enc3 != 64) {
|
|
output = output + String.fromCharCode(chr2);
|
|
}
|
|
if (enc4 != 64) {
|
|
output = output + String.fromCharCode(chr3);
|
|
}
|
|
}
|
|
|
|
output = Base64_utf8_decode(output);
|
|
|
|
return output;
|
|
|
|
};
|
|
|
|
// private method for UTF-8 decoding
|
|
function Base64_utf8_decode(utftext) {
|
|
var string = "";
|
|
var i = 0;
|
|
var c = c1 = c2 = 0;
|
|
|
|
while ( i < utftext.length ) {
|
|
|
|
c = utftext.charCodeAt(i);
|
|
|
|
if (c < 128) {
|
|
string += String.fromCharCode(c);
|
|
i++;
|
|
}
|
|
else if((c > 191) && (c < 224)) {
|
|
c2 = utftext.charCodeAt(i+1);
|
|
string += String.fromCharCode(((c & 31) << 6) | (c2 & 63));
|
|
i += 2;
|
|
}
|
|
else {
|
|
c2 = utftext.charCodeAt(i+1);
|
|
c3 = utftext.charCodeAt(i+2);
|
|
string += String.fromCharCode(((c & 15) << 12) | ((c2 & 63) << 6) | (c3 & 63));
|
|
i += 3;
|
|
}
|
|
|
|
}
|
|
|
|
return string;
|
|
}
|
|
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|
|
|