Browse Source

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

Julio Montoya 13 years ago
parent
commit
158a3467c4

+ 2 - 8
main/admin/skills.php

@@ -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();

+ 5 - 3
main/inc/ajax/skill.ajax.php

@@ -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 (

+ 67 - 14
main/inc/lib/javascript/skills.js

@@ -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;
         }
-    }
-    
+    }

+ 39 - 36
main/inc/lib/skill.lib.php

@@ -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;
         }

+ 2 - 1
main/inc/lib/skill.visualizer.lib.php

@@ -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 {

+ 5 - 7
main/social/skills_tree.php

@@ -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();

+ 1 - 39
main/template/default/skill/skill_tree.tpl

@@ -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)

+ 15 - 101
main/template/default/skill/skill_tree_student.tpl

@@ -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">