implement functionality for Questtype ?Drag&Drop?
This commit is contained in:
coderkun
parent
0f6ba634ba
commit
eb9ea3b0ca
6 changed files with 183 additions and 38 deletions
|
|
@ -49,9 +49,18 @@
|
|||
// Save user answers
|
||||
foreach($drops as &$drop)
|
||||
{
|
||||
if(!array_key_exists($drop['id'], $answers)) {
|
||||
$this->Dragndrop->setCharacterSubmission($drop['id'], $character['id'], $answers[$drop['id']]);
|
||||
// Determine user answer
|
||||
$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'])
|
||||
{
|
||||
$allSolved = false;
|
||||
break;
|
||||
if(!array_key_exists($drop['id'], $answers) || intval(substr($answers[$drop['id']], 4)) !== $drop['questtypes_dragndrop_drag_id']) {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// 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']);
|
||||
foreach($drags as &$drag) {
|
||||
$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;
|
||||
}
|
||||
|
||||
// Has Character already solved Quest?
|
||||
$solved = $this->Quests->hasCharacterSolvedQuest($quest['id'], $character['id']);
|
||||
// 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
|
||||
|
|
@ -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);
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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(
|
||||
'INSERT INTO questtypes_dragndrop_drops_characters '.
|
||||
'(questtypes_dragndrop_drops_id, character_id, questtypes_dragndrop_drag_id) '.
|
||||
'VALUES '.
|
||||
'(?, ?, ?) '.
|
||||
'ON DUPLICATE KEY UPDATE '.
|
||||
'questtypes_dragndrop_drag_id = ?',
|
||||
'iiii',
|
||||
$dropId, $characterId, $answer, $answer
|
||||
if(is_null($answer))
|
||||
{
|
||||
$this->db->query(
|
||||
'DELETE FROM questtypes_dragndrop_drops_characters '.
|
||||
'WHERE questtypes_dragndrop_drop_id = ? AND character_id = ?',
|
||||
'ii',
|
||||
$dropId, $characterId
|
||||
);
|
||||
}
|
||||
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;
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
<input type="hidden" id="dnd_drop<?=$drop['id']?>" name="dnd[<?=$drop['id']?>]" value="" />
|
||||
<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="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>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,7 +1,15 @@
|
|||
<?php foreach($texts as $i => &$text) : ?>
|
||||
<?php if($i > 0) : ?>
|
||||
<span style="background-color:grey"><?=$regexs[$i-1]['answer']?></span>
|
||||
<?php if($regexs[$i-1]['right']) : ?>✓<?php else: ?>✕<?php endif ?>
|
||||
<?php endif ?>
|
||||
<?=\hhu\z\Utils::t($text)?>
|
||||
<?php endforeach ?>
|
||||
<div 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;">
|
||||
<?php if(!is_null($drop['useranswer'])) : ?>
|
||||
<img id="drag<?=$drop['useranswer']['id']?>" src="<?=$linker->link(array('media','index',$seminary['url'],$drop['useranswer']['media']['url']))?>" />
|
||||
<?php endif ?>
|
||||
</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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
54
www/js/dnd.js
Normal file
54
www/js/dnd.js
Normal file
|
|
@ -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);
|
||||
}
|
||||
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue