Skills: adding student view, now students can see the status of the skills (still ugly but works) see #1791

skala
Julio Montoya 14 years ago
parent 5721da93f6
commit 158a3467c4
  1. 10
      main/admin/skills.php
  2. 8
      main/inc/ajax/skill.ajax.php
  3. 81
      main/inc/lib/javascript/skills.js
  4. 75
      main/inc/lib/skill.lib.php
  5. 3
      main/inc/lib/skill.visualizer.lib.php
  6. 12
      main/social/skills_tree.php
  7. 40
      main/template/default/skill/skill_tree.tpl
  8. 116
      main/template/default/skill/skill_tree_student.tpl

@ -14,20 +14,15 @@ require_once api_get_path(LIBRARY_PATH).'skill.lib.php';
require_once api_get_path(LIBRARY_PATH).'skill.visualizer.lib.php';
$this_section = SECTION_PLATFORM_ADMIN;
//api_protect_admin_script();
api_protect_admin_script();
//Adds the JS needed to use the jqgrid
$htmlHeadXtra[] = api_get_jquery_ui_js(true);
$htmlHeadXtra[] = api_get_js('jquery.jsPlumb.all.js');
$htmlHeadXtra[] = api_get_js('skills.js');
//Display::display_header();
//Display::display_reduced_header();
$skill = new Skill();
$skills = $skill->get_all(true);
$type = 'edit'; //edit
$tree = $skill->get_skills_tree(null, true);
$skill_visualizer = new SkillVisualizer($tree, $type);
@ -44,5 +39,4 @@ $tpl->assign('js', $skill_visualizer->return_js());
//
$content = $tpl->fetch('default/skill/skill_tree.tpl');
$tpl->assign('content', $content);
$tpl->display_no_layout_template();
$tpl->display_no_layout_template();

@ -67,14 +67,16 @@ switch ($action) {
$skills = $skill->get_children($id);
$return = array();
foreach($skills as $skill) {
$return [$skill['data']['id']] = array('name' => $skill['data']['name'], 'id'=>$skill['data']['id']);
$return [$skill['data']['id']] = array(
'id' => $skill['data']['id'],
'name' => $skill['data']['name'],
'passed'=> $skill['data']['passed']);
}
echo json_encode($return);
break;
case 'load_direct_parents':
$id = isset($_REQUEST['id']) ? $_REQUEST['id'] : null;
$skills = $skill->get_direct_parents($id);
$skills = $skill->get_direct_parents($id);
$return = array();
foreach($skills as $skill) {
$return [$skill['data']['id']] = array (

@ -1,3 +1,5 @@
// Arrow settings
var exampleDropOptions = {
tolerance:'touch',
hoverClass:'dropHover',
@ -16,7 +18,7 @@
};
//Settings when editing stuff
//Admin arrows
var edit_arrow_color = '#ccc';
var editEndpoint = {
@ -42,8 +44,51 @@
};
//Student arrows
//If user does not completed the skill
var default_arrow_color = '#ccc'; //gray
var defaultEndpoint = {
connector:[ "Flowchart", { stub:28 } ],
anchors: ['BottomCenter','TopCenter'],
endpoint:"Rectangle",
paintStyle:{ width:1, height:1, fillStyle:default_arrow_color },
isSource:false,
scope:'blue rectangle',
maxConnections:10,
connectorStyle : {
gradient:{ stops:[[0, default_arrow_color], [0.5, default_arrow_color], [1, default_arrow_color]] },
lineWidth:5,
strokeStyle:default_arrow_color
},
isTarget:false,
setDraggableByDefault : false,
};
// If user completed the skill
var done_arrow_color = '#73982C'; //green
var doneEndpoint = {
connector:[ "Flowchart", { stub:28 } ],
anchors: ['BottomCenter','TopCenter'],
endpoint:"Rectangle",
paintStyle:{ width:1, height:1, fillStyle:done_arrow_color},
isSource:false,
scope:'blue rectangle',
maxConnections:10,
connectorStyle : {
gradient:{ stops:[[0, done_arrow_color], [0.5, done_arrow_color], [1, done_arrow_color]] },
lineWidth:5,
strokeStyle:done_arrow_color
},
isTarget:false,
setDraggableByDefault : false,
};
//Functions
/* Clean window block classes*/
function cleanclass(obj) {
@ -51,7 +96,8 @@
obj.removeClass('second_window');
obj.removeClass('third_window');
}
/* When clicking the red block */
function open_parent(parent_id, id) {
console.log("open_parent call : id " + id + " parent_id:" + parent_id);
var numeric_parent_id = parent_id.split('_')[1];
@ -59,7 +105,8 @@
load_parent(numeric_parent_id, numeric_id);
}
//open block function
/* When clicking a children block */
function open_block(id) {
console.log("open_block id : " + id);
var numeric_id = id.split('_')[1];
@ -96,6 +143,7 @@
load_children(numeric_id, top_value);
}
/* Loads parent blocks */
function load_parent(parent_id, id) {
console.log("load_parent call : id " + id + " parent_id:" + parent_id);
var ix= 0;
@ -125,8 +173,7 @@
console.log('setting NO--- hidden_parent ');
}
ix++;
});
});
}
});
}
@ -143,14 +190,21 @@
//Display::url($skill['name'], '#', array('id'=>'edit_block_'.$block_id, 'class'=>'edit_block'))
item.name = '<a href="#" class="edit_block" id="edit_block_'+item.id+'">'+item.name+'</a>';
$('body').append('<div id="block_'+item.id+ '" class="third_window open_block window " >'+item.name+'</div>');
var status_class = ' ';
my_edit_point = editEndpoint;
if (item.passed == 1) {
my_edit_point = doneEndpoint;
status_class = 'done_window';
}
$('body').append('<div id="block_'+item.id+ '" class="third_window open_block window '+status_class+'" >'+item.name+'</div>');
var es = prepare("block_" + item.id, editEndpoint);
var e2 = prepare("block_" + my_id, editEndpoint);
var es = prepare("block_" + item.id, my_edit_point);
var e2 = prepare("block_" + my_id, my_edit_point);
jsPlumb.connect({
source: es, target:e2
});
jsPlumb.connect({source: es, target:e2});
jsPlumb.animate("block_" + item.id, {
left: left_value, top : top_value
}, { duration:duration_value});
@ -169,5 +223,4 @@
} else {
return true;
}
}
}

@ -26,9 +26,8 @@ class SkillProfile extends Model {
public function get_profiles() {
$sql = "SELECT * FROM $this->table p INNER JOIN $this->table_rel_profile sp ON(p.id = sp.profile_id) ";
$result = Database::query($sql);
$profiles = Database::store_result($result,'ASSOC');
$result = Database::query($sql);
$profiles = Database::store_result($result,'ASSOC');
return $profiles;
}
@ -47,7 +46,6 @@ class SkillProfile extends Model {
}
}
return false;
}
}
@ -119,12 +117,26 @@ class SkillRelSkill extends Model {
return $parents;
}
public function get_children($skill_id, $add_child_info = true) {
public function get_children($skill_id, $load_user_data = false, $user_id = false) {
$skills = $this->find('all', array('where'=> array('parent_id = ? '=> $skill_id)));
$skill_obj = new Skill();
$skill_rel_user = new SkillRelUser();
if ($load_user_data) {
$passed_skills = $skill_rel_user->get_user_skills($user_id);
$done_skills = array();
foreach($passed_skills as $done_skill) {
$done_skills[] = $done_skill['skill_id'];
}
}
if (!empty($skills)) {
foreach ($skills as &$skill) {
$skill['data'] = $skill_obj->get($skill['skill_id']);
$skill['data'] = $skill_obj->get($skill['skill_id']);
if (!empty($done_skills)) {
$skill['data']['passed'] = 0;
if (in_array($skill['skill_id'], $done_skills)) {
$skill['data']['passed'] = 1;
}
}
}
}
return $skills;
@ -176,7 +188,6 @@ class SkillRelGradebook extends Model {
public function update_gradebooks_by_skill($skill_id, $gradebook_list) {
$original_gradebook_list = $this->find('all', array('where'=>array('skill_id = ?' => array($skill_id))));
//var_dump($original_gradebook_list);
$gradebooks_to_remove = array();
$gradebooks_to_add = array();
$original_gradebook_list_ids = array();
@ -282,11 +293,6 @@ class Skill extends Model {
return $skill_info;
}
public function skill_exists($skill_id) {
}
function get_skills_info($skill_list) {
$skill_list = array_map('intval', $skill_list);
$skill_list = implode("', '", $skill_list);
@ -295,13 +301,12 @@ class Skill extends Model {
$result = Database::query($sql);
$users = Database::store_result($result, 'ASSOC');
return $users;
}
function get_all($load_user_data = false) {
return $users;
}
function get_all($load_user_data = false, $user_id = false) {
$sql = "SELECT id, name, description, parent_id, relation_type
FROM {$this->table} skill INNER JOIN {$this->table_skill_rel_skill} skill_rel_skill
ON skill.id = skill_rel_skill.skill_id ";
FROM {$this->table} s INNER JOIN {$this->table_skill_rel_skill} ss ON (s.id = ss.skill_id) ";
$result = Database::query($sql);
$skills = array();
@ -315,17 +320,16 @@ class Skill extends Model {
}
}
if ($load_user_data) {
$passed_skills = $this->get_user_skills(api_get_user_id());
if ($load_user_data && $user_id) {
$passed_skills = $this->get_user_skills($user_id);
foreach ($skills as &$skill) {
$skill['done_by_user'] = 0;
if (in_array($skill['id'], $passed_skills)) {
$skill['done_by_user'] = 1;
}
}
}
}
return $skills;
}
@ -341,7 +345,8 @@ class Skill extends Model {
function get_children($skill_id) {
$skill_rel_skill = new SkillRelSkill();
$skills = $skill_rel_skill->get_children($skill_id, true);
$user_id = api_get_user_id();
$skills = $skill_rel_skill->get_children($skill_id, true, $user_id);
return $skills;
}
@ -409,7 +414,7 @@ class Skill extends Model {
$skill_rel_gradebook = new SkillRelGradebook();
//Saving name, description
var_dump($params);
$this->update($params);
$skill_id = $params['id'];
@ -464,19 +469,13 @@ class Skill extends Model {
}
}
}
public function remove_skill_to_user($user_id) {
}
/**
* Get user's skills
*
* @param int $userId User's id
*/
public function get_user_skills($user_id, $get_skill_data = false) {
$user_id = intval($user_id);
//$sql = 'SELECT skill.*, user.* FROM '.$this->table_skill_rel_user.' user INNER JOIN '.$this->table_skill.' skill
@ -498,10 +497,14 @@ class Skill extends Model {
}
return $clean_skill;
}
public function get_skills_tree($user_id = null, $return_flat_array = false) {
$skills = $this->get_all();
if (isset($user_id) && !empty($user_id)) {
$skills = $this->get_all(true, $user_id);
} else {
$skills = $this->get_all();
}
$refs = array();
$skills_tree = null;
@ -535,7 +538,7 @@ class Skill extends Model {
'data' => array()
);
}
//var_dump($flat_array);exit;
//var_dump($flat_array);exit;
if ($return_flat_array) {
return $flat_array;
}

@ -71,7 +71,8 @@
$class = 'edit_window';
$end_point = 'editEndpoint';
} else {
if ($skill['done_by_user'] == 1) {
if ($skill['done_by_user'] == 1) {
$class = 'done_window';
$end_point = 'doneEndpoint';
} else {

@ -15,7 +15,7 @@ require_once api_get_path(LIBRARY_PATH).'skill.visualizer.lib.php';
$this_section = SECTION_MYPROFILE;
//api_protect_admin_script();
api_block_anonymous_users();
//Adds the JS needed to use the jqgrid
$htmlHeadXtra[] = api_get_jquery_ui_js(true);
@ -23,10 +23,9 @@ $htmlHeadXtra[] = api_get_js('jquery.jsPlumb.all.js');
$htmlHeadXtra[] = api_get_js('skills.js');
$skill = new Skill();
$skills = $skill->get_all(true);
$type = 'edit'; //edit
$type = 'read'; //edit
$tree = $skill->get_skills_tree(null, true);
$tree = $skill->get_skills_tree(api_get_user_id(), true);
$skill_visualizer = new SkillVisualizer($tree, $type);
$html = $skill_visualizer->return_html();
@ -39,8 +38,7 @@ $tpl->assign('html', $html);
$tpl->assign('skill_visualizer', $skill_visualizer);
$tpl->assign('js', $skill_visualizer->return_js());
//
$content = $tpl->fetch('default/skill/skill_tree_student.tpl');
$tpl->assign('content', $content);
$tpl->display_no_layout_template();
$tpl->display_no_layout_template();

@ -19,8 +19,6 @@ var block_size = {$skill_visualizer->block_size};
//Setting the parent by default
var parents = ['block_1'];
jsPlumb.bind("ready", function() {
//Open dialog
@ -304,43 +302,7 @@ jsPlumb.bind("ready", function() {
jsPlumb.setMouseEventsEnabled(true);
//Default
var default_arrow_color = '#ccc';
var defaultEndpoint = {
anchors: ['BottomCenter','TopCenter'],
endpoint:"Rectangle",
paintStyle:{ width:1, height:1, fillStyle:default_arrow_color },
isSource:false,
scope:'blue rectangle',
maxConnections:10,
connectorStyle : {
gradient:{ stops:[[0, default_arrow_color], [0.5, default_arrow_color], [1, default_arrow_color]] },
lineWidth:5,
strokeStyle:default_arrow_color
},
isTarget:false,
setDraggableByDefault : false,
};
// Done end point
var done_arrow_color = '#73982C';
var doneEndpoint = {
endpoint:"Rectangle",
paintStyle:{ width:1, height:1, fillStyle:done_arrow_color},
isSource:false,
scope:'blue rectangle',
maxConnections:10,
connectorStyle : {
gradient:{ stops:[[0, done_arrow_color], [0.5, done_arrow_color], [1, done_arrow_color]] },
lineWidth:5,
strokeStyle:done_arrow_color
},
isTarget:false,
setDraggableByDefault : false,
};
jsPlumb.setMouseEventsEnabled(true);
{$js}
// three ways to do this - an id, a list of ids, or a selector (note the two different types of selectors shown here...anything that is valid jquery will work of course)

@ -164,6 +164,9 @@ jsPlumb.bind("ready", function() {
;(function() {
prepare = function(elId, endpoint) {
jsPlumbDemo.initHover(elId);
@ -200,35 +203,6 @@ jsPlumb.bind("ready", function() {
jsPlumb.Defaults.Endpoint = "Rectangle";
jsPlumb.Defaults.Anchors = ["TopCenter", "TopCenter"];
var connections = [];
var updateConnections = function(conn, remove) {
if (!remove) connections.push(conn);
else {
var idx = -1;
for (var i = 0; i < connections.length; i++) {
if (connections[i] == conn) {
idx = i; break;
}
}
if (idx != -1) connections.splice(idx, 1);
}
if (connections.length > 0) {
var s = "<span>current connections</span><br/><br/><table><tr><th>scope</th><th>source</th><th>target</th></tr>";
for (var j = 0; j < connections.length; j++) {
s = s + "<tr><td>" + connections[j].scope + "</td>" + "<td>" + connections[j].sourceId + "</td><td>" + connections[j].targetId + "</td></tr>";
}
jsPlumbDemo.showConnectionInfo(s);
} else
jsPlumbDemo.hideConnectionInfo();
};
jsPlumb.bind("jsPlumbConnection", function(e) {
updateConnections(e.connection);
});
jsPlumb.bind("jsPlumbConnectionDetached", function(e) {
updateConnections(e.connection, true);
});
/**
@ -250,47 +224,9 @@ jsPlumb.bind("ready", function() {
jsPlumb.Defaults.Overlays = [
//[ "Arrow", { location:0.5 } ], if you want to add an arrow in the connection
];
jsPlumb.setMouseEventsEnabled(true);
//Default
var default_arrow_color = '#ccc';
var defaultEndpoint = {
anchors: ['BottomCenter','TopCenter'],
endpoint:"Rectangle",
paintStyle:{ width:1, height:1, fillStyle:default_arrow_color },
isSource:false,
scope:'blue rectangle',
maxConnections:10,
connectorStyle : {
gradient:{ stops:[[0, default_arrow_color], [0.5, default_arrow_color], [1, default_arrow_color]] },
lineWidth:5,
strokeStyle:default_arrow_color
},
isTarget:false,
setDraggableByDefault : false,
};
// Done end point
var done_arrow_color = '#73982C';
var doneEndpoint = {
endpoint:"Rectangle",
paintStyle:{ width:1, height:1, fillStyle:done_arrow_color},
isSource:false,
scope:'blue rectangle',
maxConnections:10,
connectorStyle : {
gradient:{ stops:[[0, done_arrow_color], [0.5, done_arrow_color], [1, done_arrow_color]] },
lineWidth:5,
strokeStyle:done_arrow_color
},
isTarget:false,
setDraggableByDefault : false,
};
{$js}
// three ways to do this - an id, a list of ids, or a selector (note the two different types of selectors shown here...anything that is valid jquery will work of course)
//jsPlumb.draggable("window1");
@ -309,26 +245,6 @@ jsPlumb.bind("ready", function() {
};
})();
$(document).ready( function() {
//When creating a connection see
//http://jsplumb.org/apidocs/files/jsPlumb-1-3-2-all-js.html#bind
jsPlumb.bind("jsPlumbConnection", function(conn) {
//alert("Connection created " + conn.sourceId + " to " + conn.targetId + " ");
//jsPlumb.detach(conn);
});
//When double clicking a connection
jsPlumb.bind("click", function(conn) {
if (confirm("Delete connection from " + conn.sourceId + " to " + conn.targetId + "?"))
jsPlumb.detach(conn);
});
//When double clicking a connection
jsPlumb.bind("click", function(endpoint) {
if (confirm("Delete connection from " + conn.sourceId + " to " + conn.targetId + "?"))
jsPlumb.detach(conn);
});
$(".chzn-select").chosen();
});
;(function() {
@ -367,6 +283,16 @@ $(document).ready( function() {
};
})();
$(document).ready( function() {
//When creating a connection see
//http://jsplumb.org/apidocs/files/jsPlumb-1-3-2-all-js.html#bind
jsPlumb.bind("jsPlumbConnection", function(conn) {
//alert("Connection created " + conn.sourceId + " to " + conn.targetId + " ");
//jsPlumb.detach(conn);
});
});
</script>
{$html}
@ -382,26 +308,14 @@ $(document).ready( function() {
<div class="formw">
<input type="text" name="name" id="name" size="40" />
</div>
</div>
<div class="row">
<div class="label">
<label for="name">Parent</label>
</div>
<div class="formw">
<select id="parent_id" name="parent_id" />
</select>
</div>
</div>
</div>
<div class="row">
<div class="label">
<label for="name">Gradebook</label>
</div>
<div class="formw">
<select id="gradebook_id" name="gradebook_id[]" multiple="multiple"/>
</select>
<span class="help-block">
Gradebook Description
</span>
</select>
</div>
</div>
<div class="row">

Loading…
Cancel
Save