Minor css change

css/questionset.css

@@ -1,3 +1,25 @@
+/* Chart testing */
+
+.questionset-results .node {
+  cursor: pointer;
+}
+
+.questionset-results .node circle {
+  fill: #fff;
+  stroke: steelblue;
+  stroke-width: 1.5px;
+}
+
+.questionset-results .node text {
+  font: 10px sans-serif;
+}
+
+.questionset-results .link {
+  fill: none;
+  stroke: #ccc;
+  stroke-width: 1.5px;
+}
+
 /* IcoMoon font licensed under the GNU General Public License: http://www.gnu.org/licenses/gpl.html */
 @font-face {
   font-family: 'icomoon-questionset';

js/questionset.js

@@ -284,6 +284,7 @@ H5P.QuestionSet = function (options, contentId) {
           resetTask();
           $myDom.children().hide().filter('.questionset').show();
           _showQuestion(params.initialQuestion);});
+      addChart();
     };
 
     if (params.endGame.showAnimations) {
@@ -459,10 +460,245 @@ H5P.QuestionSet = function (options, contentId) {
         info.addMedia(new H5P.MediaCopyright(video.copyright));
       }
     }
-
     return info;
   };
 
+  var addChart = function () {
+    var constructedTree = [
+      {
+        "name": "Top level",
+        "parent": "null",
+        "children" : [
+
+        ]
+      }
+    ];
+
+    var newArray = [];
+
+    options.questions.forEach(function (qs) {
+      var found = false;
+      newArray.forEach(function (entry){
+        if (entry.text === qs.library) {
+          found = true;
+          constructedTree[0].children[newArray.indexOf(entry)].children.push(
+            {
+              "name": qs.params.taskDescription !== undefined ? qs.params.taskDescription : (typeof qs.params.question === 'string' ? qs.params.question : qs.library),
+              "parent": qs.library,
+              "index": options.questions.indexOf(qs)
+            }
+          );
+          entry.value += 1;
+          entry.parameters.push(qs.params);
+          return;
+        }
+      });
+      if (!found) {
+        newArray.push({value: 1, text: qs.library, parameters: [qs.params]});
+        constructedTree[0].children.push(
+          {
+            "name": qs.library,
+            "parent": constructedTree[0].name,
+            "children": [
+              {
+                "name": qs.params.taskDescription !== undefined ? qs.params.taskDescription : (typeof qs.params.question === 'string' ? qs.params.question : qs.library),
+                "parent": qs.library,
+                "index": options.questions.indexOf(qs)
+              }
+            ]
+          }
+        );
+      }
+    });
+    var data = [4, 8, 15, 16, 23, 42];
+    var $chart = $('<div/>', {'class': 'chart'})
+      .appendTo($('.questionset-results'));
+    var w = 600;
+    var h = 250;
+
+    var dataset = newArray;
+
+    var treeData = [
+      {
+        "name": "Top Level",
+        "parent": "null",
+        "children": [
+          {
+            "name": "Level 2: A",
+            "parent": "Top Level",
+            "children": [
+              {
+                "name": "Son of A",
+                "parent": "Level 2: A"
+              },
+              {
+                "name": "Daughter of A",
+                "parent": "Level 2: A"
+              }
+            ]
+          },
+          {
+            "name": "Level 2: B",
+            "parent": "Top Level"
+          }
+        ]
+      }
+    ];
+
+    // ************** Generate the tree diagram	 *****************
+    var margin = {top: 20, right: 120, bottom: 20, left: 120},
+      width = 960 - margin.right - margin.left,
+      height = 500 - margin.top - margin.bottom;
+
+    var i = 0,
+      duration = 750;
+
+    var tree = d3.layout.tree()
+      .size([height, width]);
+
+    var diagonal = d3.svg.diagonal()
+      .projection(function(d) { return [d.y, d.x]; });
+
+    var svg = d3.select(".chart").append("svg")
+      .attr("width", width + margin.right + margin.left)
+      .attr("height", height + margin.top + margin.bottom)
+      .append("g")
+      .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
+
+    root = treeData[0];
+    root2 = constructedTree[0];
+
+    root2.x0 = height / 2;
+    root2.y0 = 0;
+
+    function collapse(d) {
+      if (d.children) {
+        d._children = d.children;
+        d._children.forEach(collapse);
+        d.children = null;
+      }
+    }
+
+    root2.children.forEach(collapse);
+    update(root2);
+
+
+    //update(root2);
+
+    //update(root);
+
+    d3.select('.chart').style("height", "800px");
+
+    function update(source) {
+
+      // Compute the new tree layout.
+      var nodes = tree.nodes(root2).reverse(),
+        links = tree.links(nodes);
+
+      // Normalize for fixed-depth.
+      nodes.forEach(function(d) { d.y = d.depth * 180; });
+
+      // Update the nodes…
+      var node = svg.selectAll("g.node")
+        .data(nodes, function(d) { return d.id || (d.id = ++i); });
+
+      // Enter any new nodes at the parent's previous position.
+      var nodeEnter = node.enter().append("g")
+        .attr("class", "node")
+        .attr("transform", function(d) { return "translate(" + source.y0 + "," + source.x0 + ")"; })
+        .on("click", function (d) {
+          if (d.index !== undefined){
+            resetTask();
+            $myDom.children().hide().filter('.questionset').show();
+            _showQuestion(d.index);
+            return false;
+          }
+          click(d);
+        });
+
+      nodeEnter.append("circle")
+        .attr("r", 1e-6)
+        .style("fill", function(d) { return d._children ? "lightsteelblue" : "#fff"; });
+
+      nodeEnter.append("text")
+        .attr("x", function(d) { return d.children || d._children ? -10 : 10; })
+        .attr("dy", ".35em")
+        .attr("text-anchor", function(d) { return d.children || d._children ? "end" : "start"; })
+        .text(function(d) { return d.name; })
+        .style("fill-opacity", 1e-6);
+
+      // Transition nodes to their new position.
+      var nodeUpdate = node.transition()
+        .duration(duration)
+        .attr("transform", function(d) { return "translate(" + d.y + "," + d.x + ")"; });
+
+      nodeUpdate.select("circle")
+        .attr("r", 4.5)
+        .style("fill", function(d) { return d._children ? "lightsteelblue" : "#fff"; });
+
+      nodeUpdate.select("text")
+        .style("fill-opacity", 1);
+
+      // Transition exiting nodes to the parent's new position.
+      var nodeExit = node.exit().transition()
+        .duration(duration)
+        .attr("transform", function(d) { return "translate(" + source.y + "," + source.x + ")"; })
+        .remove();
+
+      nodeExit.select("circle")
+        .attr("r", 1e-6);
+
+      nodeExit.select("text")
+        .style("fill-opacity", 1e-6);
+
+      // Update the links…
+      var link = svg.selectAll("path.link")
+        .data(links, function(d) { return d.target.id; });
+
+      // Enter any new links at the parent's previous position.
+      link.enter().insert("path", "g")
+        .attr("class", "link")
+        .attr("d", function(d) {
+          var o = {x: source.x0, y: source.y0};
+          return diagonal({source: o, target: o});
+        });
+
+      // Transition links to their new position.
+      link.transition()
+        .duration(duration)
+        .attr("d", diagonal);
+
+      // Transition exiting nodes to the parent's new position.
+      link.exit().transition()
+        .duration(duration)
+        .attr("d", function(d) {
+          var o = {x: source.x, y: source.y};
+          return diagonal({source: o, target: o});
+        })
+        .remove();
+
+      // Stash the old positions for transition.
+      nodes.forEach(function(d) {
+        d.x0 = d.x;
+        d.y0 = d.y;
+      });
+    }
+
+    // Toggle children on click.
+    function click(d) {
+      if (d.children) {
+        d._children = d.children;
+        d.children = null;
+      } else {
+        d.children = d._children;
+        d._children = null;
+      }
+      update(d);
+    }
+  };
+
+
+
   // Masquerade the main object to hide inner properties and functions.
   var returnObject = {
     $: $(this),

library.json

@@ -16,6 +16,9 @@
   "preloadedJs": [
     {
       "path": "js/questionset.js"
+    },
+    {
+      "path": "d3.js"
     }
   ],
   "preloadedCss": [