<?php // $Id: exporthtml_snakes.php,v 1.4 2011/07/23 12:34:08 bdaloukas Exp $
/**
* This page export the game snakes to html
*
* @author bdaloukas
* @version $Id: exporthtml_snakes.php,v 1.4 2011/07/23 12:34:08 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 $game->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>