implement functionality for Questtype ?Drag&Drop?

questtypes/dragndrop/DragndropQuesttypeController.inc

@@ -49,9 +49,18 @@
 			// Save user answers
 			foreach($drops as &$drop)
 			{
-				if(!array_key_exists($drop['id'], $answers)) {
+				// Determine user answer
-					$this->Dragndrop->setCharacterSubmission($drop['id'], $character['id'], $answers[$drop['id']]);
+				$answer = null;
+				if(array_key_exists($drop['id'], $answers) && !empty($answers[$drop['id']]))
+				{
+					$a = intval(substr($answers[$drop['id']], 4));
+					if($a !== false && $a > 0) {
+						$answer = $a;
+					}
 				}
+				
+				// Update database record
+				$this->Dragndrop->setCharacterSubmission($drop['id'], $character['id'], $answer);
 			}
 		}
 		
@@ -74,19 +83,16 @@
 			$drops = $this->Dragndrop->getDrops($dndField['quest_id']);
 			
 			// Match drops with user answers
-			$allSolved = true;
 			foreach($drops as &$drop)
 			{
-				if(!array_key_exists($drop['id'], $answers) || $answer[$drop['id']] != $drop['questtypes_dragndrop_drag_id'])
+				if(!array_key_exists($drop['id'], $answers) || intval(substr($answers[$drop['id']], 4)) !== $drop['questtypes_dragndrop_drag_id']) {
-				{
+					return false;
-					$allSolved = false;
-					break;
 				}
 			}
 			
 			
 			// Set status
-			return $allSolved;
+			return true;
 		}
 		
 		
@@ -107,17 +113,26 @@
 			$dndField = $this->Dragndrop->getDragndrop($quest['id']);
 			$dndField['media'] = $this->Media->getMediaById($dndField['questmedia_id']);
 			
-			// Get Drops
-			$drops = $this->Dragndrop->getDrops($dndField['quest_id']);
-			
 			// Get Drags
-			$drags = $this->Dragndrop->getDrags($dndField['quest_id']);
+			$drags = array();
-			foreach($drags as &$drag) {
+			$dragsByIndex = $this->Dragndrop->getDrags($dndField['quest_id']);
+			foreach($dragsByIndex as &$drag) {
 				$drag['media'] = $this->Media->getMediaById($drag['questmedia_id']);
+				$drags[$drag['id']] = $drag;
 			}
 			
-			// Has Character already solved Quest?
+			// Get Drops
-			$solved = $this->Quests->hasCharacterSolvedQuest($quest['id'], $character['id']);
+			$drops = $this->Dragndrop->getDrops($dndField['quest_id']);
+			foreach($drops as &$drop)
+			{
+				// Get saved user answer
+				$drop['useranswer'] = $this->Dragndrop->getCharacterSubmission($drop['id'], $character['id']);
+				if(!is_null($drop['useranswer']))
+				{
+					$drop['useranswer'] = $drags[$drop['useranswer']];
+					unset($drags[$drop['useranswer']['id']]);
+				}
+			}
 			
 			
 			// Pass data to view
@@ -130,7 +145,6 @@
 		
 		/**
 		 * Action: submission.
-		 * TODO submission()
 		 * 
 		 * Show the submission of a Character for a Quest.
 		 * 
@@ -141,6 +155,37 @@
 		 */
 		public function submission($seminary, $questgroup, $quest, $character)
 		{
+			// Get Drag&Drop field
+			$dndField = $this->Dragndrop->getDragndrop($quest['id']);
+			$dndField['media'] = $this->Media->getMediaById($dndField['questmedia_id']);
+			
+			// Get Drags
+			$drags = array();
+			$dragsByIndex = $this->Dragndrop->getDrags($dndField['quest_id']);
+			foreach($dragsByIndex as &$drag) {
+				$drag['media'] = $this->Media->getMediaById($drag['questmedia_id']);
+				$drags[$drag['id']] = $drag;
+			}
+			
+			// Get Drops
+			$drops = $this->Dragndrop->getDrops($dndField['quest_id']);
+			foreach($drops as &$drop)
+			{
+				// Get saved user answer
+				$drop['useranswer'] = $this->Dragndrop->getCharacterSubmission($drop['id'], $character['id']);
+				if(!is_null($drop['useranswer']))
+				{
+					$drop['useranswer'] = $drags[$drop['useranswer']];
+					unset($drags[$drop['useranswer']['id']]);
+				}
+			}
+			
+			
+			// Pass data to view
+			$this->set('seminary', $seminary);
+			$this->set('field', $dndField);
+			$this->set('drops', $drops);
+			$this->set('drags', $drags);
 		}
 		
 	}

questtypes/dragndrop/DragndropQuesttypeModel.inc

@@ -84,7 +84,7 @@
 		
 		
 		/**
-		 * Save Character’s submitted answer for one Drag&Drop-field.
+		 * Save Character’s submitted answer for one Drop-field.
 		 * 
 		 * @param	int	$dropId		ID of Drop-field
 		 * @param	int	$characterId	ID of Character
@@ -92,16 +92,53 @@
 		 */
 		public function setCharacterSubmission($dropId, $characterId, $answer)
 		{
-			$this->db->query(
+			if(is_null($answer))
-				'INSERT INTO questtypes_dragndrop_drops_characters '.
+			{
-				'(questtypes_dragndrop_drops_id, character_id, questtypes_dragndrop_drag_id) '.
+				$this->db->query(
-				'VALUES '.
+					'DELETE FROM questtypes_dragndrop_drops_characters '.
-				'(?, ?, ?) '.
+					'WHERE questtypes_dragndrop_drop_id = ? AND character_id = ?',
-				'ON DUPLICATE KEY UPDATE '.
+					'ii',
-				'questtypes_dragndrop_drag_id = ?',
+					$dropId, $characterId
-				'iiii',
+				);
-				$dropId, $characterId, $answer, $answer
+			}
+			else
+			{
+				$this->db->query(
+					'INSERT INTO questtypes_dragndrop_drops_characters '.
+					'(questtypes_dragndrop_drop_id, character_id, questtypes_dragndrop_drag_id) '.
+					'VALUES '.
+					'(?, ?, ?) '.
+					'ON DUPLICATE KEY UPDATE '.
+					'questtypes_dragndrop_drag_id = ?',
+					'iiii',
+					$dropId, $characterId, $answer, $answer
+				);
+			}
+		}
+		
+		
+		/**
+		 * Get Character’s saved answer for one Drop-field.
+		 * 
+		 * @param	int	$dropId		ID of Drop-field
+		 * @param	int	$characterId	ID of Character
+		 * @return	int			ID of Drag-field or null
+		 */
+		public function getCharacterSubmission($dropId, $characterId)
+		{
+			$data = $this->db->query(
+				'SELECT questtypes_dragndrop_drag_id '.
+				'FROM questtypes_dragndrop_drops_characters '.
+				'WHERE questtypes_dragndrop_drop_id = ? AND character_id = ?',
+				'ii',
+				$dropId, $characterId
 			);
+			if(!empty($data)) {
+				return $data[0]['questtypes_dragndrop_drag_id'];
+			}
+			
+			
+			return null;
 		}
 		
 	}

questtypes/dragndrop/html/quest.tpl

@@ -1,14 +1,14 @@
 <form method="post">
-	<div id="dnd" style="width:<?=$field['width']?>px; height:<?=$field['height']?>px; background-image:url('<?=$linker->link(array('media','index',$seminary['url'],$field['media']['url']))?>')">
+	<div id="dropZone" style="width:<?=$field['width']?>px; height:<?=$field['height']?>px; background-image:url('<?=$linker->link(array('media','index',$seminary['url'],$field['media']['url']))?>')">
 		<?php foreach($drops as &$drop) : ?>
-		<div id="drop<?=$drop['id']?>" style="position:absolute; width:<?=$drop['width']?>px; height:<?=$drop['height']?>px; margin:<?=$drop['top']?>px 0 0 <?=$drop['left']?>px;"></div>
+		<div id="drop<?=$drop['id']?>" ondragenter="onDragEnter(event)" ondragover="onDragOver(event)" ondragleave="onDragLeave(event)" ondrop="onDrop(event)" style="position:absolute; width:<?=$drop['width']?>px; height:<?=$drop['height']?>px; margin:<?=$drop['top']?>px 0 0 <?=$drop['left']?>px;"><?php if(!is_null($drop['useranswer'])) : ?><img id="drag<?=$drop['useranswer']['id']?>" draggable="true" ondragstart="onDragStart(event)" ondragend="onDragEnd(event)" src="<?=$linker->link(array('media','index',$seminary['url'],$drop['useranswer']['media']['url']))?>" /><?php endif ?></div>
-		<input type="hidden" id="dnd_drop<?=$drop['id']?>" name="dnd[<?=$drop['id']?>]" value="" />
+		<input type="hidden" id="dnd_drop<?=$drop['id']?>" name="answers[<?=$drop['id']?>]" value="<?=(!is_null($drop['useranswer'])) ? 'drag'.$drop['useranswer']['id'] : null ?>" />
 		<?php endforeach ?>
 	</div>
 	
-	<div>
+	<div id="dragZone" ondragenter="onDragEnter(event)" ondragover="onDragOver(event)" ondragleave="onDragLeave(event)" ondrop="onDrop(event, false)" style="width:100%; min-height:5em;">
 		<?php foreach($drags as &$drag) : ?>
-		<img id="drag<?=$drag['id']?>" src="<?=$linker->link(array('media','index',$seminary['url'],$drag['media']['url']))?>" />
+		<img id="drag<?=$drag['id']?>" draggable="true" ondragstart="onDragStart(event)" ondragend="onDragEnd(event)" src="<?=$linker->link(array('media','index',$seminary['url'],$drag['media']['url']))?>" />
 		<?php endforeach ?>
 	</div>
 	

questtypes/dragndrop/html/submission.tpl

@@ -1,7 +1,15 @@
-<?php foreach($texts as $i => &$text) : ?>
+<div style="width:<?=$field['width']?>px; height:<?=$field['height']?>px; background-image:url('<?=$linker->link(array('media','index',$seminary['url'],$field['media']['url']))?>')">
-<?php if($i > 0) : ?>
+	<?php foreach($drops as &$drop) : ?>
-<span style="background-color:grey"><?=$regexs[$i-1]['answer']?></span>
+	<div id="drop<?=$drop['id']?>" style="position:absolute; width:<?=$drop['width']?>px; height:<?=$drop['height']?>px; margin:<?=$drop['top']?>px 0 0 <?=$drop['left']?>px;">
-<?php if($regexs[$i-1]['right']) : ?>✓<?php else: ?>✕<?php endif ?>
+		<?php if(!is_null($drop['useranswer'])) : ?>
-<?php endif ?>
+		<img id="drag<?=$drop['useranswer']['id']?>" src="<?=$linker->link(array('media','index',$seminary['url'],$drop['useranswer']['media']['url']))?>" />
-<?=\hhu\z\Utils::t($text)?>
+		<?php endif ?>
-<?php endforeach ?>
+	</div>
+	<?php endforeach ?>
+</div>
+
+<div style="width:100%; min-height:5em;">
+	<?php foreach($drags as &$drag) : ?>
+	<img id="drag<?=$drag['id']?>" src="<?=$linker->link(array('media','index',$seminary['url'],$drag['media']['url']))?>" />
+	<?php endforeach ?>
+</div>

views/html/html.tpl

@@ -21,6 +21,7 @@
 	<script type="text/javascript" src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
 	<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/respond.js/1.4.2/respond.js"></script>
 	<![endif]-->
+	<script type="text/javascript" src="/js/dnd.js"></script>
 	<meta name="description" content="">
 	<meta name="robots" content="noindex,follow">
 </head>

www/js/dnd.js

@@ -0,0 +1,54 @@
+/**
+ * Drag&Drop-functions
+ */
+
+function onDragStart(event)
+{
+	jQuery(event.currentTarget).addClass("drag");
+	event.dataTransfer.setData("Text", event.target.id);
+}
+
+function onDragEnter(event)
+{
+	if(event.target.nodeName == "DIV" && !(event.target.parentNode.id == "dropZone" && event.target.hasChildNodes())) {
+		jQuery(event.target).addClass('drop');
+	}
+}
+
+function onDragOver(event)
+{
+	if(event.target.nodeName == "DIV" && !(event.target.parentNode.id == "dropZone" && event.target.hasChildNodes())) {
+		event.preventDefault();
+	}
+}
+
+function onDragLeave(event)
+{
+	jQuery(event.target).removeClass('drop');
+}
+
+function onDragEnd(event)
+{
+	jQuery(event.currentTarget).removeClass("drag");
+}
+
+function onDrop(event, setId)
+{
+	setId = (typeof setId == 'undefined') ? true : setId;
+	jQuery(event.currentTarget).removeClass('drag');
+	jQuery(event.target).removeClass('drop');
+	event.preventDefault();
+	
+	var data = event.dataTransfer.getData("Text");
+	var dataElement = $('#'+data);
+	if(dataElement.parent() && $('#dnd_'+dataElement.parent().attr('id'))) {
+		$('#dnd_'+dataElement.parent().attr('id')).attr('value', "null");
+	}
+	jQuery(event.target).append(dataElement);
+	
+	if(setId) {
+		console.log(data);
+		$('#dnd_' + jQuery(event.target).attr('id')).attr('value', data);
+	}
+
+}