Your Description:
diff --git a/scripts/practice.js b/scripts/practice.js
index 089a962..19351e3 100644
--- a/scripts/practice.js
+++ b/scripts/practice.js
@@ -94,6 +94,7 @@ var practice08 = [{
"title":"Venn Diagrams",
"category":"Diagrams: Relational",
"copyright":"NCAM 2009",
+ "template": "vennDiagram",
"thumbURL": "images/practice08t_venn_diagrams.png",
"fullURL": "images/practice08_venn_diagrams.jpg",
"caption": "",
@@ -399,4 +400,4 @@ var practice31 = [{
"guidelines":"
- If available, provide the title.
- Describe the most important pieces of the timeline, which are the dates and the events, in a specific order.
- Timelines should be described from left to right, in the order of earliest to most recent events.
- If there are more than three events, use a bulleted list.
- If there is a general trend, such as multiple events clustered around a certain timeframe or date, or a large gap in events, then a summary sentence could be useful before the list of the dates.
",
"context":"",
"description":"A timeline shows three major events in Kentucky. About 12,000 years ago people arrive in Kentucky. About 3,000 years ago, native Kentuckians start growing corn and beans. About 1,000 years ago, Mississippians build mounds in Kentucky.",
-}];
\ No newline at end of file
+}];
diff --git a/scripts/vennTemplate.js b/scripts/vennTemplate.js
new file mode 100644
index 0000000..4399e9e
--- /dev/null
+++ b/scripts/vennTemplate.js
@@ -0,0 +1,298 @@
+(function(window, document, $) {
+
+ function VennTemplate() {
+ this._firstForm = null;
+ this._secondForm = null;
+ this.multiStep = true;
+ // this will keep track of whether the last step in this template has been
+ // requested.
+ this.atLastStep = false;
+
+ // generate a unique ID to append to the IDs of the generated elements for
+ // forms so that we can guarantee that new templates will not override the
+ // form's elements when we try to access them later
+ this.uid = Math.floor((Math.random(Date.now()) * 100000000));
+ };
+
+ VennTemplate.prototype = {
+ get firstForm() {
+ // see if we need to create the form
+ if(!this._firstForm) {
+ this._firstForm = this.generateFirstForm();
+ }
+ this.atLastStep = false;
+ return this._firstForm;
+ },
+
+ get secondForm() {
+ if(!this._secondForm) {
+ this._secondForm = this.generateSecondForm();
+ }
+ this.atLastStep = true;
+ return this._secondForm;
+ },
+
+ get description() {
+ return this.generateDescription();
+ },
+
+ get title() {
+ return this.getInputValById('venn-title-input-' + this.uid);
+ },
+
+ get caption() {
+ return this.getInputValById('venn-caption-input-' + this.uid);
+ },
+
+ get numCircles() {
+ return this.getInputValById('venn-circle-input-' + this.uid);
+ },
+
+ get numIntersections() {
+ return this.getInputValById('venn-intersection-input-' + this.uid);
+ },
+
+ get unit() {
+ return this.getInputValById('venn-unit-input-' + this.uid);
+ }
+ }
+
+
+ VennTemplate.prototype.getInputValById = function(eid) {
+ var elt = document.getElementById(eid);
+ return elt.value;
+ };
+
+ VennTemplate.prototype.getCircleLabel = function(i) {
+ return this.getInputValById('venn-circle-label-input-' + this.uid + i);
+ };
+
+ VennTemplate.prototype.getCircleValue = function(i) {
+ return this.getInputValById('venn-circle-value-input-' + this.uid + i);
+ };
+
+ VennTemplate.prototype.getIntersectionLabel = function(i) {
+ return this.getInputValById('venn-intersection-label-input-' + this.uid + i);
+ };
+
+ VennTemplate.prototype.getIntersectionValue = function(i) {
+ return this.getInputValById('venn-intersection-value-input-' + this.uid + i);
+ };
+
+ VennTemplate.prototype.generateDescription = function() {
+ var desc = 'This is a Venn diagram, titled ';
+ desc += this.title;
+ desc += ', showing ';
+ desc += this.numCircles;
+ desc += ' circles. A caption reads: "';
+ desc += this.caption;
+ desc += '". The circles are labeled ';
+
+ for(var i=0; i
1) {
+ desc += 's';
+ }
+
+ desc += '. ';
+
+ for(var i=0; i