202 lines
7.3 KiB
PHP
202 lines
7.3 KiB
PHP
<!DOCTYPE html><html lang="en"><head><meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width">
|
|
|
|
<?
|
|
include("functions.php");
|
|
include("../levels.php");
|
|
|
|
|
|
if ( isset( $_GET['level'] ) && !empty( $_GET['level'] ) && is_numeric( $_GET['level'] )){
|
|
$level = $_GET['level'];
|
|
}
|
|
else{
|
|
// echo("level value invalid<br>");
|
|
$level = 1;
|
|
}
|
|
|
|
$level_description = "level_" . $level . "_description"; //build function name, see http://php.net/manual/de/functions.variable-functions.php
|
|
// echo("Function name: \"$level_description\"<br>");
|
|
if(is_callable($level_description)) { // The function exists
|
|
$parameters_valid = true;
|
|
list($title, $description, $example, $criteria, $passcode) = $level_description();
|
|
}
|
|
else{
|
|
$parameters_valid = false;
|
|
$passcode = "";
|
|
}
|
|
?>
|
|
|
|
|
|
<title><? echo("$GC_ID: $GC_NAME"); ?> - Code Editor (Level <? echo("$level: \"$title\""); ?>)</title>
|
|
<head>
|
|
<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.5.18/webfont.js"></script>
|
|
<script src="human-resource-machine-viewer/pako_inflate.min.js"></script>
|
|
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
|
|
<link href="human-resource-machine-viewer/hrm.css" rel="stylesheet">
|
|
<link href="stylesheet.css" rel="stylesheet">
|
|
<script src="human-resource-machine-viewer/hrm.js"></script>
|
|
</head>
|
|
<body onload="page_loaded();">
|
|
|
|
|
|
|
|
|
|
<script>
|
|
var hrmv;
|
|
var default_source = "-- Füge deinen Programm-Code in den Code Editor ein.\n-- Zum Beispiel:\n\tINBOX\n\tOUTBOX\n-- Wenn Du danach auf Play drückst, wird dein Programm in einem neuen Fenster ausgeführt!";
|
|
|
|
function page_loaded(){
|
|
var program = "";
|
|
|
|
try{
|
|
// Store
|
|
localStorage.setItem("local_storage_test", "1234567890");
|
|
// retrieve again
|
|
if(localStorage.getItem("local_storage_test") == "1234567890"){ //local storage is working
|
|
console.log("local storage is working");
|
|
document.getElementById("local_storage_check").innerHTML = "";
|
|
program = localStorage.getItem("<? echo($GC_ID); ?>_Level_<? echo($level); ?>"); //load program from storage
|
|
}
|
|
else{
|
|
console.log("Local storage is NOT working!");
|
|
}
|
|
}
|
|
catch(e){ //fail, local storage doesnt work
|
|
console.log("Local storage is NOT working!");
|
|
}
|
|
|
|
if(program != ""){
|
|
console.log("Loaded program:");
|
|
console.log(program);
|
|
$('#code_editor').val(program); //load program from local storrage and put it into the editor field
|
|
}
|
|
else{
|
|
$('#code_editor').val(default_source); //load default program
|
|
}
|
|
font_loaded();
|
|
}
|
|
|
|
|
|
function font_loaded() {
|
|
// if($('#code_editor').val() != ""){
|
|
source = $('#code_editor').val() + "\n";
|
|
// }
|
|
// else{
|
|
// source = default_source;
|
|
// }
|
|
hrmv = new HRMViewer('code', source);
|
|
|
|
$('#code_editor').bind('input propertychange', function() {
|
|
// if(this.value != ""){
|
|
source = this.value + "\n";
|
|
// }
|
|
// else{
|
|
// source = default_source;
|
|
// }
|
|
hrmv = new HRMViewer('code', source);
|
|
});
|
|
|
|
$("#code_editor").keydown(function(e) {
|
|
console.log("tab");
|
|
if(e.keyCode === 9) { // tab was pressed
|
|
// get caret position/selection
|
|
var start = this.selectionStart;
|
|
end = this.selectionEnd;
|
|
|
|
var $this = $(this);
|
|
|
|
// set textarea value to: text before caret + tab + text after caret
|
|
$this.val($this.val().substring(0, start)
|
|
+ "\t"
|
|
+ $this.val().substring(end));
|
|
|
|
// put caret at right position again
|
|
this.selectionStart = this.selectionEnd = start + 1;
|
|
|
|
// prevent the focus lose
|
|
return false;
|
|
}
|
|
});
|
|
|
|
}
|
|
|
|
WebFont.load({
|
|
google: { families: ['Passion One'] },
|
|
active: font_loaded,
|
|
inactive: font_loaded,
|
|
});
|
|
|
|
|
|
function save_program(){
|
|
//Use local storage, see http://www.w3schools.com/html/html5_webstorage.asp
|
|
localStorage.setItem("<? echo($GC_ID); ?>_Level_<? echo($level); ?>", $('#code_editor').val());
|
|
console.log("Program saved to LocalStorage Facility of Level <? echo($level); ?>");
|
|
}
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<div style="width: 800px">
|
|
<h1><nobr><? echo("$GC_ID: $GC_NAME"); ?> - Code Editor (Level <? echo("$level: \"$title\""); ?>)</nobr></h1>
|
|
|
|
|
|
|
|
<?
|
|
// echo("Passcode: $passcode, given: " . $_GET['passcode'] . "<br>");
|
|
if($passcode != $_GET['passcode']){ //passcode is wrong, level not allowed
|
|
?>
|
|
<h2><font color=darkred>Der Pacsscode für das angegebene Level ist ungültig!<br>
|
|
Versuchs mal mit <a href="editor.php?level=1">Level 1</a>.</font></h3>
|
|
<?
|
|
}
|
|
else if($parameters_valid == true){
|
|
?>
|
|
<h2>Aufgabe</h2>
|
|
<div class="hrmcode"> <?echo($description); ?></div>
|
|
|
|
<h2>Beispiel (Die erste Box ist jeweils die Box ganz rechts)</h2>
|
|
<div class="hrmcode box_float_left"><? echo($example); ?></div><div style="clear: both;"></div>
|
|
|
|
<h2>Test-Kriterien</h2>
|
|
<div class="hrmcode"><? echo($criteria); ?></div><br>
|
|
|
|
<div id="local_storage_check" style="margin:0px;"><font color=darkred>Hmm, dein Browser unterstützt leider kein <a href="https://de.wikipedia.org/wiki/Web_Storage" target="_blank">lokales speichern</a>. D.h., Du musst selber dafür sorgen, dass Du dein Programm zwischenspeicherst, befor Du es ausführst!</font></div>
|
|
<hr>
|
|
|
|
|
|
</div>
|
|
<table><tr>
|
|
<td valign=top>
|
|
<h2>Programm-Code Editor</h2>
|
|
<form id=CodeEditorForm action="run.php?level=<? echo($level); ?>&passcode=<? echo($passcode); ?>" method="post" target="_self">
|
|
<button id="play" title="Play" onclick="save_program()"><img src="images/play.png" height=40px><br>Play</button>
|
|
<div style="float: right; margin: 10px"><a href="help.htm" target="_blank"><img src="images/help.png" height=50px></a></div> <br>
|
|
|
|
<textarea id=code_editor name=asm autocomplete="off" rows="30" cols="40" placeholder="-- Füge deinen Programm-Code in den Code Editor ein.">
|
|
</textarea >
|
|
</form>
|
|
|
|
</td><td valign=top>
|
|
<h2>Formatierter Programm-Code</h2>
|
|
<div class="hrmcode" id="code" style="width: 400px;">Lade Programm...</div>
|
|
</td><td valign=top>
|
|
<h2></h2>
|
|
<div style="width: 100px;"></div>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
|
|
<?
|
|
}
|
|
else{//level does not exist
|
|
?>
|
|
Das angegebene Level existiert nicht!<br>
|
|
Versuchs mal mit <a href="editor.php?level=1">Level 1</a>.
|
|
<?
|
|
}
|
|
?>
|
|
</body>
|
|
</html>
|