Skip to content
This repository was archived by the owner on May 24, 2022. It is now read-only.

Adds a venn diagram template. #23

Open
Rdbaker wants to merge 2 commits into
base: master
Choose a base branch
from
Open

Adds a venn diagram template. #23

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
8b27d61
Adds a venn diagram template.
Rdbaker Mar 26, 2017
8d40a92
Fixes a couple small things and abstracts a few functions.
Rdbaker Apr 2, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
172 changes: 123 additions & 49 deletions practice.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,8 +10,49 @@
<link rel="stylesheet" type="text/css" href="styles/styles.css" media="screen" />
<script src="scripts/app.js"></script>
<script src="scripts/practice.js"></script>
<script>
$(document).ready(function(){
<script src="scripts/vennTemplate.js"></script>
<script>
function showEditor(data) {
$('#dynamicStep').hide();
$('#step2').show();
if(!!data) {
CKEDITOR.instances.editor1.setData(data);
}
}

function enterEditMode(data) {
$('#modalStep1NextButton').hide();
$('#modalStep2NextButton').show();
$('#modalStep2PreviousButton').show();
$('#modalStep3PreviousButton').hide();
$('#modalStep3DoneButton').hide();
$('#step1').hide();

if(!!data) {
CKEDITOR.instances.editor1.setData(data);
}
}

function showFirstTemplateForm(template) {
$('#firstDynamicForm').html(template.firstForm);
$('#firstDynamicForm').show();
$('#secondDynamicForm').hide();
$('#dynamicStep').show();
$('#step2').hide();
}

function showSecondTemplateForm(template) {
$('#secondDynamicForm').html(template.secondForm);
$('#firstDynamicForm').hide();
$('#secondDynamicForm').show();
}

$(document).ready(function(){
// define a <template type> -> <template class> mapping
var templateMap = {
vennDiagram: VennTemplate,
};

//DEFINE ITEMS
var practiceItems = [practice01, practice02, practice03, practice04, practice05, practice06, practice07, practice08, practice09,practice10, practice11, practice12, practice13, practice14, practice15, practice16, practice17, practice18, practice19, practice20, practice21, practice22, practice23, practice24, practice25, practice26, practice27, practice28, practice29, practice30, practice31];

Expand Down Expand Up @@ -50,87 +91,112 @@
function openModal(id) {
clearModal();

var practiceItemObj = window[id];
var practiceItemObj = window[id];
var category = practiceItemObj[0].category;
var title = practiceItemObj[0].title;
var thumbURL = practiceItemObj[0].thumbURL;
var fullURL = practiceItemObj[0].fullURL;
var guidelines = practiceItemObj[0].guidelines;
var description = practiceItemObj[0].description;
var copyright = practiceItemObj[0].copyright;


var templateType = practiceItemObj[0].template;
if(templateType in templateMap) {
var template = new templateMap[templateType]();
} else {
var template = null;
}


var modalTitle = title;
$('.modal-title').html(modalTitle);
$('.modalThumb').attr('src',thumbURL);
$('.modalThumbLink').attr('href',fullURL);
$('.modalImageLink').attr('href',fullURL);
$('.modal-copyright').html(copyright);

//STEP 1
$('.modalGuidelines').html(guidelines);

$('#step1').show();
$('#modalStep1NextButton').show();
$('#modalStep2NextButton').hide();
$('#modalStep2PreviousButton').hide();
$('#modalStep3PreviousButton').hide();
$('#modalStep3DoneButton').hide();

$('#practiceModal').modal('show');

$('#modalStep1NextButton').click(function() {
$('#modalStep1NextButton').hide();
$('#modalStep2NextButton').show();
$('#modalStep2PreviousButton').show();
$('#modalStep3PreviousButton').hide();
$('#modalStep3DoneButton').hide();
//$('#modalStep2BackButton').show();

$('#step1').hide();
$('#step2').show();
$('#step3').hide();
enterEditMode();
if(templateType in templateMap) {
showFirstTemplateForm(template);
} else {
showEditor();
}
$('#step3').hide();
});

$('#modalStep2NextButton').click(function() {
$('#modalStep1NextButton').hide();
$('#modalStep2NextButton').hide();
$('#modalStep2PreviousButton').hide();
$('#modalStep3PreviousButton').show();
$('#modalStep3DoneButton').show();

var data = CKEDITOR.instances.editor1.getData();

$('#step3YourDescription').html(data);
$('#step3SampleDescription').html(description);

$('#step1').hide();
$('#step2').hide();
$('#step3').show();
// TODO: this actually assumes it's a 2-step process, not a n-step
// process, like the variable name implies. If we want more than 2
// steps, we'll have to patch this
if(template && template.multiStep && !template.atLastStep && !template.done) {
showSecondTemplateForm(template);
} else if(template && template.multiStep && template.atLastStep && !template.done) {
$('#secondDynamicForm').hide();
showEditor(template.description);
template.done = true;
} else {
$('#modalStep1NextButton').hide();
$('#modalStep2NextButton').hide();
$('#modalStep2PreviousButton').hide();
$('#modalStep3PreviousButton').show();
$('#modalStep3DoneButton').show();

var data = CKEDITOR.instances.editor1.getData();

$('#step3YourDescription').html(data);
$('#step3SampleDescription').html(description);

$('#step1').hide();
$('#step2').hide();
$('#dynamicStep').hide();
$('#step3').show();
}
});

$('#modalStep2PreviousButton').click(function() {
//return to step 1
$('#modalStep1NextButton').show();
$('#modalStep2NextButton').hide();
$('#modalStep3DoneButton').hide();
$('#modalStep2PreviousButton').show();
$('#modalStep3PreviousButton').hide();
$('#step1').show();
$('#step2').hide();
$('#step3').hide();

$('#modalStep2PreviousButton').click(function() {
if(template && template.multiStep && template.atLastStep) {
$('#firstDynamicForm').html(template.firstForm);
$('#firstDynamicForm').show();
$('#secondDynamicForm').hide();
} else {
//return to step 1
$('#modalStep1NextButton').show();
$('#modalStep2NextButton').hide();
$('#modalStep3DoneButton').hide();
$('#modalStep2PreviousButton').show();
$('#modalStep3PreviousButton').hide();
$('#step1').show();
$('#step2').hide();
$('#dynamicStep').hide();
$('#step3').hide();
}
});
$('#modalStep3PreviousButton').click(function() {

$('#modalStep3PreviousButton').click(function() {
//return to step 2
$('#modalStep1NextButton').hide();
$('#modalStep2NextButton').show();
$('#modalStep3DoneButton').hide();
$('#modalStep2PreviousButton').show();
$('#modalStep3PreviousButton').hide();
$('#step1').hide();
$('#step2').show();
$('#step3').hide();
$('#dynamicStep').hide();
$('#step2').show();
showEditor(template.description);
template.done = true;
$('#step3').hide();
});

//STEP 2
Expand All @@ -141,6 +207,7 @@
function clearModal() {
$('#step1').hide();
$('#step2').hide();
$('#dynamicStep').hide();
$('#step3').hide();
$('#modalStep1NextButton').hide();
$('#modalStep2NextButton').hide();
Expand Down Expand Up @@ -275,6 +342,13 @@ <h3>Try Describing the Image:</h3>
CKEDITOR.replace( 'editor1' );
</script>
</form> <div></div>
</div>
<div id="dynamicStep">
<h3>Try Describing the Image:</h3>
<div id="firstDynamicForm">
</div>
<div id="secondDynamicForm">
</div>
</div>
<div id="step3">
<h3>Your Description:</h3>
Expand Down
3 changes: 2 additions & 1 deletion scripts/practice.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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": "",
Expand Down Expand Up @@ -399,4 +400,4 @@ var practice31 = [{
"guidelines":"<ul><li>If available, provide the title. </li><li>Describe the most important pieces of the timeline, which are the dates and the events, in a specific order. </li><li>Timelines should be described from left to right, in the order of earliest to most recent events. </li><li>If there are more than three events, use a bulleted list. </li><li>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. </li></ul>",
"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.",
}];
}];
Loading