WBT – Web Based Training
Die Seite wurde für die Hochschulveranstaltung E-Learning 2 erstellt. Ziel war es eine Web Based Training Anwendung für das Thema „Dialektisch orientierte Didaktik“ zu erstellen. Die Webseite kann hier im Detail begutachtet werden:
Web Based Training
Umsetzung
Zum vergrößern Bild anklicken.
Umgesetzt wurde die Seite mit simplem HTML und CSS. Die Seite begleitet ein Sprechertext der zuvor in einem Tonstudio der Hochschule aufgenommen wurde. Die Sprachdateien liegen im .swf Container vor und werden über eine kleine Flash Application in Gang gesetzt. Das Design entstand in Photoshop. Für die Überprüfung der Lernziele wurde ein Quiz mit verschiedenen Fragen zur Dialektisch orientierten Didaktik erstellt.
Das Quiz
Das Quiz habe ich auf Basis von PHP erstellt. Hierbei bin ich soweit es ging objektorientiert Vorgegangen. Das Quiz beinhaltet auch eine Punkte Verteilung. Beantwortet man einmal eine Frage falsch, so bekommt man Punkte abgezogen. Geschieht das ein Zweites mal, dann bekommt man nur noch einen Punkt. Nach dem dritten Versuch bekommt der Benutzer gar keinen Punkt mehr. Damit wollten wir das Raten der Antworten verhindern. Startet der Benutzer das Quiz von neuem, dann wird er automatisch zu der Frage weitergeleitet, an der er zuletzt dran war. Dies wurde durch eine Session, basierend auf Cookies realisiert. Somit kann der Benutzer bei einer Frage, die er nicht beantworten kann, nochmals im Inhalt nachschauen und dann wieder zu der selben Frage zurückspringen.
#databaselogin.php
<?php
/**
* Database Information
*/
class DatabaseLogin
{
private $host;
private $username;
private $password;
private $database;
function __construct()
{
$this->host = "localhost";
$this->username = "******";
$this->password = "******";
$this->database = "*******";
}
public function getHost(){
return $this->host;
}
public function getUsername(){
return $this->username;
}
public function getPassword(){
return $this->password;
}
public function getDatabase(){
return $this->database;
}
}
?>
#database.php
<?php
require 'database/databaselogin.php';
error_reporting('E_ALL');
/**
* Database Connection
*/
class Database
{
private $databaselogin;
private $db;
function __construct()
{
$this->databaselogin = new DatabaseLogin();
$this->db = new mysqli($this->databaselogin->getHost(),$this->databaselogin->getUsername(),
$this->databaselogin->getPassword(),$this->databaselogin->getDatabase());
if(mysqli_connect_errno()){
die ('Konnte keine Verbindung zur Datenbank aufbauen:' .mysqli_connect_error(). '('.mysqli_connect_errno().')');
}
}
#Function for SELECT something from the database
public function read($sql)
{
$result = $this->db->query($sql);
if (!$result) {
die('Etwas stimmte mit dem Query nicht:' .$this->db->error);
}else{
return $result;
}
}
#Function to add a new Record to the Database
public function write($sql)
{
#code
}
#Function to update or change somethin in the Database
public function update($value='')
{
# code...
}
}
?>
#test.php
<?php
require_once 'Quiz.php';
session_start();
error_reporting('E_ALL');
$quiz = new Quiz();
#Quiznumbercount
if (!isset($_SESSION['quiznumber'])) {
$qnr = 1;
}else {
$qnr = $_SESSION['quiznumber'];
}
#Wronganswer
if (!isset($_SESSION['wrong'])) {
$wrong = false;
}else {
$wrong = $_SESSION['wrong'];
}
#Quiznumberpoints
if (!isset($_SESSION['points'])) {
$points = 70;
}else {
$points = $_SESSION['points'];
}
#Wronganswercounter
if(!isset($_SESSION['acount'])) {
$acount = 0;
}else {
$acount = $_SESSION['acount'];
}
#Rightanswer
if(!isset($_SESSION['right'])) {
$right = false;
}else {
$right = $_SESSION['right'];
}
?>
<!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>WBT - Dialektisch orientierte Didaktik</title>
<meta name="robots" content="noindex, nofollow" />
<meta name="content-language" content="de" />
<link href="../reset.css" rel="stylesheet" type="text/css" />
<link href="../layout.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wrapper">
<div id="inhalt" class="clearfix">
<div id="links">
<ul>
<li><a href="../index.html">» Übersicht</a></li>
<li><a href="../geschichte-und-begruender.html">» Geschichte und Begründer</a></li>
<li><a href="../rahmenbedingungen.html">» Rahmenbedingungen</a></li>
<li><a href="../dialektik.html">» Dialektik</a></li>
<li><a href="../prozesskomponenten.html">» Prozesskomponenten</a></li>
<li><a href="../unterrichtsmethoden.html">» Unterrichtsmethoden 1</a></li>
<li class="last"><a href="../unterrichtsmethoden-2.html">» Unterrichtsmethoden 2</a></li>
</ul>
<a id="test_active" href="introduction.php">Überprüfung / Test</a>
</div>
<div id="rechts">
<?php
if($wrong != true) {
?>
<div style="float: right">
<object id="pla" type="application/x-shockwave-flash" data="../player.swf" width="85" height="20">
<param name="movie" value="../player.swf" />
<param name="bgcolor" value="#ffffff" />
<param name="autoplay" value="1" />
<param name="FlashVars" value="mp3=<?=$quiz->getMP3($qnr)?>&autoplay=1&width=85&showstop=1&showvolume=1&showslider=0&sliderwidth=0&sliderheight=0&loadingcolor=6A4210&bgcolor1=BCC69D&bgcolor2=BCC69D&slidercolor1=6A4210&slidercolor2=6A4210&sliderovercolor=ffffff&buttoncolor=6A4210&buttonovercolor=ffffff&textcolor=6A4210" />
</object>
</div>
<?
if($qnr <=14) { ?>
<h1>Multiple Choice Test - Frage <?=$qnr?></h1>
<form action="check.php" method="post" accept-charset="utf-8">
<?php
if($right == true) {
echo '<img src="../pictures/right.png" alt="Richtig" class="correct"/><p>Ihre gewählte Antwort war Richtig!</p>';
}
?>
<table class="quiz">
<tr>
<th> <?=$quiz->getQuestion($qnr);?></th>
</tr>
<?php
$i = 1;
$j = 1;
$aid = $quiz->getAnswerId($qnr);
foreach($quiz->getAnswers($qnr) as $answer) {
if(($j%2) == 0) {
echo '<tr>';
echo '<td><label for="x'.$aid[$i].'">'.$answer.'</label></td>';
echo '<td><input type="radio" id="x'.$aid[$i].'" name="answer" value="'.htmlspecialchars($answer).'" /></td>';
echo '</tr>';
$i = $i +1;
$j = $j +1;
}else {
echo '<tr>';
echo '<td class="one"><label for="x'.$aid[$i].'">'.$answer.'</label></td>';
echo '<td class="one"><input type="radio" id="x'.$aid[$i].'" name="answer" value="'.htmlspecialchars($answer).'" /></td>';
echo '</tr>';
$i = $i +1;
$j = $j +1;
}
}
?>
<tr><td class="submit" colspan="3"><input type="submit" value="Antworten" /></td></tr>
</table>
<input type="hidden" name="points" value="<?=$points?>" />
<input type="hidden" name="qnr" value="<?=$qnr?>" />
<input type="hidden" name="acount" value="<?=$acount?>" />
</form>
<?}else {?>
<h1>Gratulation</h1>
<p>Sie Haben den Test erfolgreich Absolviert und dabei <span class="bold"><?=$points?> Punkte</span> erzielt.</p>
<p>Sie können den Test gerne wiederholen und so ein Besseres resultat erzielen. Hier gelangen Sie wieder an den Anfang
des Tests</p>
<div class="center"><a href="destroy.php"><img src="../pictures/roundarrow.png" alt="Backarrow"/></a></div>
<?}
}else {
$_SESSION['wrong'] = false;
?>
<h1><img src="../pictures/wrong.png" alt="Wrong Answer"/> Falsche Antwort </h1>
<p>Leider war Ihre Antwort Falsch, hier können Sie es erneut versuchen</p>
<div class="center"><a href="test.php"><img src="../pictures/back.png" alt="Zurück"/></a>
</div>
<p>Möchten Sie den Inhalt zu der genannten Frage nochmals neu erarbeiten dann können Sie das hier
</p>
<div class="center"><a href="../<?=$quiz->getSection($_SESSION['quiznumber'])?>"><img src="../pictures/book.png" alt="Buch"/></a></div>
<?}?>
<a href="destroy.php" class="blank" ><img src="../gfx/roundarrow_small.png" alt="round arrow"/> Quiz neu starten</a>
</div>
</div>
<div id="footer">
<ul class="clearfix">
<li><a class="impressum" href="../impressum.html">Impressum</a></li>
<li><a class="team" href="../team.html">Team</a></li>
</ul>
</div>
</div>
</body>
</html>
#Quiz.php
<?php
require 'database.php';
error_reporting('E_ALL');
class Quiz{
private $db; #connection to the database
function __construct()
{
$this->db = new Database();
}
public function getQuestion($id){
$result = $this->db->read("SELECT * FROM `questions` WHERE `id` =".$id);
$res_arr= array();
while ($row = $result->fetch_assoc()) {
$res_arr= $row['question'];
}
return $res_arr;
}
public function getMP3($id){
$result = $this->db->read("SELECT * FROM `questions` WHERE `id` =".$id);
$res_arr = array();
while ($row = $result->fetch_assoc()) {
$res_arr= $row['mp3'];
}
return $res_arr;
}
public function getAnswers($id){
$result = $this->db->read("SELECT answer FROM `answers` WHERE `questions_id` =".$id." ORDER BY RAND()");
$res_arr = array();
$i = 1;
while($row = $result->fetch_assoc()) {
$res_arr[$i] = $row['answer'];
$i = $i+1;
}
return $res_arr;
}
public function checkAnswer($answer,$qid){
$result = $this->db->read('SELECT * FROM `answers` WHERE `questions_id` = '.$qid.' AND `answer` = "'.$answer.'"');
$res_arr = array();
while($row = $result->fetch_assoc()){
$res_arr = $row['is_correct'];
}
return $res_arr;
}
public function getSection($qid){
$result = $this->db->read("SELECT * FROM `questions` WHERE `id` = ".$qid);
$res_arr = array();
while ($row = $result->fetch_assoc()) {
$res_arr = $row['section'];
}
return $res_arr;
}
public function getAnswerId($qid){
$result = $this->db->read("SELECT * FROM `answers` WHERE `questions_id` = ". $qid);
$res_arr = array();
$i = 1;
while ($row = $result->fetch_assoc()){
$res_arr[$i] = $row['id'];
$i = $i +1;
}
return $res_arr;
}
public function getPoints($answer,$qid,$acount,$points) {
if($this->checkAnswer($answer, $qid) < 1) {
$acount = $acount+1;
switch ($acount) {
case 1:
$points = $points-3;
break;
case 2:
$points = $points-5;
break;
}
return array("acount"=>$acount, "points" => $points, "qid" => $qid, "wrong" => true, "right" => false);
}else {
$acount = 0;
$qid = $qid +1;
return array("acount"=>$acount, "points" => $points, "qid" => $qid, "wrong" =>false, "right" => true);
}
}
}
?>
#check.php
<?php
session_start();
error_reporting(E_ALL);
require('Quiz.php');
$quiz = new Quiz();
$answer = $_POST['answer'];
$qid = $_POST['qnr'];
$points = $_POST['points'];
$acount = $_POST['acount'];
$checkarray = $quiz->getPoints($answer, $qid, $acount,$points);
$_SESSION['points'] = $checkarray['points'];
$_SESSION['quiznumber'] = $checkarray['qid'];
$_SESSION['wrong'] = $checkarray['wrong'];
$_SESSION['acount'] = $checkarray['acount'];
$_SESSION['right'] = $checkarray['right'];
header('Location:test.php');
?>
