Report_Prototypes/radar.html at master · zwaters/Report_Prototypes · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">

  <title>Prototype report mock-ups</title>


  <!--[if lt IE 9]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
  <![endif]-->
</head>

<body>
  <script src="libs/0.2.0/Chart.min.js"></script>
  	<h2>Comparison of Cognitive Presence (You vs. Group avg)</h2>
    <canvas id="student-radar-cogp" width="400" height="400"></canvas>
  <script>

  	var data = {
  		labels: ["Triggering", "Exploration", "Integration", "Resolution", "Other"],
  		datasets: [
  			{
  				label: "Dummy-Student",
  				fillColor: "rgba(220,220,220,0.2)",
  				strokeColor: "rgba(220,220,220,1)",
  				pointColor: "rgba(220,220,220,1)",
  				pointStrokeColor: "#fff",
  				pointHighlightFill: "#fff",
  				pointHighlightStroke: "rbga(220,220,220,1)",
  				data: [.85, .70, .55, .42, .67]

  			},
  			{
  			  	label: "Student-Group-Avg",
  			    fillColor: "rgba(151,187,205,0.2)",
	            strokeColor: "rgba(151,187,205,1)",
	            pointColor: "rgba(151,187,205,1)",
	            pointStrokeColor: "#fff",
	            pointHighlightFill: "#fff",
	            pointHighlightStroke: "rgba(151,187,205,1)",
  				data: [.75, .67, .44, .37, .46]
  			}
  		]
  	}

  	var ctx = document.getElementById("student-radar-cogp").getContext("2d");
  	var strchart = new Chart(ctx).Radar(data, {
    //Boolean - Whether to show lines for each scale point
    scaleShowLine : false,

    //Boolean - Whether we show the angle lines out of the radar
    angleShowLineOut : true,

    //Boolean - Whether to show labels on the scale
    scaleShowLabels : false,

    // Boolean - Whether the scale should begin at zero
    scaleBeginAtZero : true,

    //String - Colour of the angle line
    angleLineColor : "rgba(0,0,0,.1)",

    //Number - Pixel width of the angle line
    angleLineWidth : 1,

    //String - Point label font declaration
    pointLabelFontFamily : "'Arial'",

    //String - Point label font weight
    pointLabelFontStyle : "normal",

    //Number - Point label font size in pixels
    pointLabelFontSize : 10,

    //String - Point label font colour
    pointLabelFontColor : "#666",

    //Boolean - Whether to show a dot for each point
    pointDot : true,

    //Number - Radius of each point dot in pixels
    pointDotRadius : 3,

    //Number - Pixel width of point dot stroke
    pointDotStrokeWidth : 1,

    //Number - amount extra to add to the radius to cater for hit detection outside the drawn point
    pointHitDetectionRadius : 20,

    //Boolean - Whether to show a stroke for datasets
    datasetStroke : true,

    //Number - Pixel width of dataset stroke
    datasetStrokeWidth : 2,

    //Boolean - Whether to fill the dataset with a colour
    datasetFill : true,

    //String - A legend template
    legendTemplate : "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<datasets.length; i++){%><li><span style=\"background-color:<%=datasets[i].lineColor%>\"></span><%if(datasets[i].label){%><%=datasets[i].label%><%}%></li><%}%></ul>"

});


  </script>

<h3>TODO/TO-FIGURE-OUT:</h3>
<ul>
	<li>Recent Contributions (to group/community), tagged with phase</li>
	<li>Identify posts that attracted significant interest to user - suggest readings to facilitate interest</li>
	<li>Current active group discussions, and where throughout the Cognitive Presence spectrum the discussion currently is - prompt student to join discussion</li>
	<li>How can I fit SNA in here?</li>
	<li>Some kind of prompts to assist in SRL and Reflection? (challenge student to reach particular goals) - Example: A challenge to increase resolution posts (derived from above spider-chart)</li>
</ul>


</body>
</html>