mako 0.0.0

data/lib/mako/data/template_creator/src/components/SmallRichTextEditorToolbar.mxml

@@ -0,0 +1,133 @@
+<?xml version="1.0" encoding="utf-8"?>
+<mx:ToolBar fontFamily="Arial" fontSize="11" xmlns:mx="http://www.adobe.com/2006/mxml" width="100%" horizontalGap="2" verticalGap="2" borderThickness="20">
+	
+	<mx:Script>
+		<![CDATA[
+			[Bindable] public var showFont:Boolean = true;
+			[Bindable] public var showFontSize:Boolean = true;
+			[Bindable] public var showFormatting:Boolean = true;
+			[Bindable] public var showColor:Boolean = true;
+			[Bindable] public var showAlign:Boolean = true;
+			[Bindable] public var showBullets:Boolean = true;
+			[Bindable] public var showLink:Boolean = true;
+			
+			protected var _rte:SmallRichTextEditor;
+
+			public function set rte(rteInstance:SmallRichTextEditor):void
+			{
+				_rte = rteInstance;
+			}
+			
+			public function get rte():SmallRichTextEditor
+			{
+				return _rte;
+			}
+			
+			public function setEditingElements(font:Boolean = true, fontSize:Boolean = true, formatting:Boolean = true, color:Boolean = true, vrule1:Boolean = true, align:Boolean = true, vrule2:Boolean = true, bullets:Boolean = true, vrule3:Boolean = true, tooltip:Boolean = true, pageLink:Boolean = true, extLink:Boolean = true):void
+			{
+				if(!font) removeChild(fontFamilyCombo);
+				if(!fontSize) removeChild(fontSizeCombo);
+				if(!formatting) removeChild(toolBar2);
+				if(!color) removeChild(colorPicker);
+				if(!align) removeChild(alignButtons);
+				if(!bullets) removeChild(bulletButton);
+				
+				if(!vrule1) removeChild(vRule1);
+				if(!vrule2) removeChild(vRule2);
+				
+			}
+		]]>
+	</mx:Script>
+	
+	<mx:Array id="fontFamilyArray"> 
+		<mx:String>_sans</mx:String>
+		<mx:String>_serif</mx:String>
+		<mx:String>_typewriter</mx:String>
+		<mx:String>Arial</mx:String>
+		<mx:String>Courier</mx:String>
+		<mx:String>Courier New</mx:String>
+		<mx:String>Geneva</mx:String>
+		<mx:String>Georgia</mx:String>
+		<mx:String>Helvetica</mx:String>
+		<mx:String>Times New Roman</mx:String>
+		<mx:String>Times</mx:String>
+		<mx:String>Verdana</mx:String>
+	</mx:Array>
+	
+	<mx:Array id="fontSizeArray"> 
+		<mx:String>8</mx:String>
+		<mx:String>9</mx:String>
+		<mx:String>10</mx:String>
+		<mx:String>11</mx:String>
+		<mx:String>12</mx:String>
+		<mx:String>14</mx:String>
+		<mx:String>16</mx:String>
+		<mx:String>18</mx:String>
+		<mx:String>20</mx:String>
+		<mx:String>22</mx:String>
+		<mx:String>24</mx:String>
+		<mx:String>26</mx:String>
+		<mx:String>28</mx:String>
+		<mx:String>36</mx:String>
+		<mx:String>48</mx:String>
+		<mx:String>72</mx:String>
+	</mx:Array>
+	
+	<mx:ComboBox visible="{showFont}" id="fontFamilyCombo" cornerRadius="0" editable="true"
+				 creationComplete="_rte.getTextStyles();_rte.lastCaretIndex = -1;"
+				 dataProvider = "{fontFamilyArray}"
+				 close="_rte.setTextStyles('font');"
+				 enter="_rte.setTextStyles('font');"/>
+	
+	<mx:ComboBox visible="{showFontSize}" id="fontSizeCombo" cornerRadius="0" editable="true"
+				 paddingLeft="2" paddingRight="2"
+				 dataProvider = "{fontSizeArray}"
+				 close="_rte.setTextStyles('size');"
+				 enter="_rte.setTextStyles('size');"/>
+	
+	<mx:HBox id="toolBar2" horizontalGap="2">
+		
+		<mx:Button id="boldButton" width="20" toggle="true" icon="@Embed(source='/assets/materia/images/bold.png')" cornerRadius="0"
+				   
+				   click="_rte.setTextStyles('bold', event.currentTarget.selected);" /> 
+		
+		<mx:Button id="italicButton" width="20" toggle="true" icon="@Embed(source='/assets/materia/images/italic.png')" cornerRadius="0"
+				   
+				   click="_rte.setTextStyles('italic', event.currentTarget.selected);" /> 
+		
+		<mx:Button id="underlineButton" width="20" toggle="true" icon="@Embed(source='/assets/materia/images/underline.png')" cornerRadius="0"
+				   
+				   click="_rte.setTextStyles('underline', event.currentTarget.selected);" /> 
+	</mx:HBox>
+	
+	<mx:ColorPicker id="colorPicker" width="22" height="22"
+					close="_rte.setTextStyles('color');"/>
+	
+	<mx:VRule id="vRule1" height="{alignButtons.height}"/>
+	
+	<mx:ToggleButtonBar id="alignButtons" buttonWidth="20" styleName="alignStyle"
+						itemClick="_rte.setTextStyles('align', ToggleButtonBar(event.currentTarget).dataProvider.getItemAt(ToggleButtonBar(event.currentTarget).selectedIndex).action);" >
+		<mx:dataProvider>
+			<mx:Array> 
+				<mx:Object icon="@Embed(source='/assets/materia/images/left.png')" action="left"/>
+				<mx:Object icon="@Embed(source='/assets/materia/images/center.png')" action="center"/>
+				<mx:Object icon="@Embed(source='/assets/materia/images/right.png')" action="right"/>
+				<mx:Object icon="@Embed(source='/assets/materia/images/justify.png')" action="justify"/>
+			</mx:Array>
+		</mx:dataProvider>
+	</mx:ToggleButtonBar>
+	
+	<mx:VRule id="vRule2" height="{alignButtons.height}"/>
+	
+	<mx:Button id="bulletButton" width="20" toggle="true" icon="@Embed(source='/assets/materia/images/bullets.png')" cornerRadius="0"
+			   
+			   click="_rte.setTextStyles('bullet', event.currentTarget.selected);" /> 
+	<!--<mx:VRule id="vRule4" height="{alignButtons.height}"/>
+	
+	<mx:TextInput id="linkTextInput" width="140"
+	focusOut="if (linkTextCommitted) 
+	{ trace('already committed'); linkTextCommitted = false; } 
+	else 
+	{ trace('not committed'); setTextStyles('url', linkTextInput.text); linkTextInput.text=defaultLinkProtocol;}"
+	enter="setTextStyles('url', linkTextInput.text); linkTextInput.text = defaultLinkProtocol; linkTextCommitted = true;"/>-->
+</mx:ToolBar>

data/lib/mako/data/templates/html/README.md

@@ -0,0 +1,11 @@
+__DefaultWidget__ : A Materia Widget
+==================
+
+This package contains a Materia Widget
+
+Installation
+============
+Visit the [Materia Widget Development Documentation](http://ucfcdl.github.io/Materia) for up to date details about installing widgets.
+
+Author
+======

data/lib/mako/data/templates/html/_creator/build.yaml

@@ -0,0 +1,12 @@
+---
+## What kind of widget your widget is (compile_html or compile_flash)
+type: compile_html
+
+# The location of your engine 
+target: creator.html
+
+# What assets to include with your engine
+include:
+  - font
+  - css
+  - js

data/lib/mako/data/templates/html/_creator/creator.html

@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<title>__DefaultWidget__ Creator</title>
+		<meta charset="utf-8" />
+		<style type="text/css"></style>
+		<script type="text/javascript" src="/js/materia.require.js"></script>
+		<link rel="stylesheet" type="text/css" href="css/creator.css">
+		<script type="text/javascript">
+			require(['creatorcore', 'cs!js/creator'], function(util) {
+				Materia.CreatorCore.start(__DefaultWidgetCondensed__.Creator);
+			});
+		</script>
+	</head>
+	<body>
+
+		<div>__DefaultWidget__ Title: <input type="text" id="mytitle" /></div>
+	</body>
+</html>

data/lib/mako/data/templates/html/_creator/css/creator.less

@@ -0,0 +1,29 @@
+/*@font-face {
+	font-family: 'CorbelBold';
+	src: url('../font/corbelb-webfont.eot');
+	src: url('../font/corbelb-webfont.eot?#iefix') format('embedded-opentype'),
+		 url('../font/corbelb-webfont.woff') format('woff'),
+		 url('../font/corbelb-webfont.ttf') format('truetype'),
+		 url('../font/corbelb-webfont.svg#CorbelBold') format('svg');
+	font-weight: normal;
+	font-style: normal;
+}*/
+
+html, body {
+	color:white;
+	background-color: #2f3944;
+	padding: 10px;
+	margin: 0;
+}
+
+#json {
+	width:100%;
+	height:400px;
+}
+
+.button {
+	display:inline-block;
+	background:green;
+	padding:10px;
+	border-radius: 10px;
+}

data/lib/mako/data/templates/html/_creator/js/creator.coffee

@@ -0,0 +1,122 @@
+Namespace('__DefaultWidgetCondensed__').Creator = do ->
+	_widget  = null # holds widget data
+	_qset    = null # Keep tack of the current qset
+	_title   = null # hold on to this instance's title
+	_version = null # holds the qset version, allows you to change your widget to support old versions of your own code
+
+	# ============================ REQUIRED ===============================
+	#
+	# These methods are required as they are called directly by materia
+	#
+	# =====================================================================
+
+	# Called by Materia.CreatorCore when your creator is starting a brand new widget
+	# @param widget:Object  widget type object
+	# @param baseUrl:String url that this copy of materia is hosted at
+	initNewWidget = (widget, baseUrl) ->
+		_buildDisplay 'Default Title', widget, options:{randomize:false}
+
+	# Called by Materia.CreatorCore when your creator is editing an existing widget
+	# @param title:String   Title of the widget
+	# @param widget:Object  widget type object
+	# @param qset:Object    the custom question and data structure
+	# @param version:String version of the widget the qset conforms to
+	# @param baseUrl:String url that this copy of materia is hosted at
+	initExistingWidget = (title, widget, qset, version, baseUrl) ->
+		_trace 'editing existing'
+		_buildDisplay title, widget, qset, version
+
+	# Called by Materia.CreatorCore when a user clicks on the save, preview, or publish button
+	# Expects you to respond by calling one of two methods:
+	# Materia.CreatorCore.save(title, qset)
+	# or
+	# Materia.CreatorCore.cancelSave('Question 3 is incomplete') - send nothing if you don't want materia to pop an alert box for you
+	# @param mode:String   'save', 'publish', or 'preview' depending on what button was pressed
+	onSaveClicked = (mode = 'save') ->
+		if _buildSaveData()
+			Materia.CreatorCore.save _title, _qset
+		else
+			Materia.CreatorCore.cancelSave 'Widget not ready to save.'
+
+	# Called by Materia.CreatorCore any time the widget saves correctly
+	# @param title:String   Title of the widget
+	# @param widget:Object  widget type object
+	# @param qset:Object    the custom question and data structure
+	# @param version:String version of the widget the qset conforms to
+	onSaveComplete = (title, widget, qset, version) ->
+		_trace 'save complete!', title, widget, qset, version
+
+	# ============================ OPTIONAL REQUIRED ============================
+	#
+	#  These methods are only needed if you suport importing of questions or media
+	#
+	# ===========================================================================
+
+	# called by CreatorCore when the user has selected questions
+	# @param questions:Array array of question objects
+	onQuestionImportComplete = (questions) ->
+		_trace 'questions are here!', questions
+
+	# called by CreatorCore when the user has selected media
+	# @param media:Array array of media objects
+	onMediaImportComplete = (media) ->
+		_trace 'the media is here', media
+		# Get the url to one of the media
+		url = Materia.CreatorCore.getMediaUrl(media[0].id)
+		# Put the image on the screen
+		$('#images').remove()
+		$('body').append '<div id="images"></div>'
+		$('#images').append '<img src="'+url+'"/>'
+
+	# ============================ WIDGET SPECIFIC ===============================
+	#
+	#  These methods are used just within this widget to execute code specific to
+	# this one widget
+	#
+	# ============================================================================
+
+	# @param title:String   Title of the widget
+	# @param widget:Object  widget type object
+	# @param qset:Object    the custom question and data structure
+	# @param version:String version of the widget the qset conforms to
+	_buildDisplay = (title = 'Default __DefaultWidgetCondensed__ Title', widget, qset, version) ->
+		_version = version
+		_qset    = qset
+		_widget  = widget
+		_title   = title
+
+		if _qset.options.randomize
+			$('#randomOn').prop 'checked', true
+		else
+			$('#randomOff').prop 'checked', true
+
+		$('#mytitle').val _title
+		$('#json').val JSON.stringify(_qset)
+		$('#importMedia').click -> Materia.CreatorCore.showMediaImporter()
+		_trace 'OK, I finished setting up my creator'
+
+	# Our own internal function that checks to see if we can save
+	# and updates our qset object for saving
+	_buildSaveData = ->
+		_trace 'building save data'
+		okToSave = false
+		# update our values
+		_trace $('#mytitle').val()
+		_title = $('#mytitle').val()
+		okToSave = true if _title? && _title!= ''
+		_qset = JSON.parse $('#json').val()
+		_qset.options.randomize = $('#randomOn').prop 'checked'
+
+		okToSave
+
+	_trace = ->
+		if console? && console.log?
+			console.log.apply console, arguments
+
+	#public
+	initNewWidget: initNewWidget
+	initExistingWidget: initExistingWidget
+	onSaveClicked:onSaveClicked
+	onMediaImportComplete:onMediaImportComplete
+	onQuestionImportComplete:onQuestionImportComplete
+	onSaveComplete:onSaveComplete

data/lib/mako/data/templates/html/_engine/build.yaml

@@ -0,0 +1,12 @@
+---
+# What kind of widget your widget is (compile_html or compile_flash)
+type: compile_html
+
+# The location of your engine 
+target: widget.html
+
+# What assets to include with your engine
+include:
+  - font
+  - css
+  - js

data/lib/mako/data/templates/html/_engine/css/widget.scss

@@ -0,0 +1,18 @@
+// @font-face {
+// 	font-family: 'CorbelBold';
+// 	src: url('../font/corbelb-webfont.eot');
+// 	src: url('../font/corbelb-webfont.eot?#iefix') format('embedded-opentype'),
+// 		 url('../font/corbelb-webfont.woff') format('woff'),
+// 		 url('../font/corbelb-webfont.ttf') format('truetype'),
+// 		 url('../font/corbelb-webfont.svg#CorbelBold') format('svg');
+// 	font-weight: normal;
+// 	font-style: normal;
+// }
+
+html, body
+{
+	color:white;
+	background-color: #2f3944;
+	padding: 0;
+	margin: 0;
+}

data/lib/mako/data/templates/html/_engine/js/widget.coffee

@@ -0,0 +1,143 @@
+Namespace('__DefaultWidgetCondensed__').Engine = do ->
+	_qset = null
+	_currentCat = null
+	_currentQuestion = null
+	_$currentQuestionSquare = null
+	_currentQuestionIndex = null
+	_$board = null
+	_categories = {}
+	_questions = {}
+	_scores = []
+	_totalQuestions = 0
+	_finalScore = 0
+
+	# Called by Materia.Engine when your widget Engine should start the user experience
+	start = (instance, qset, version = '1') ->
+		# Go get qset data
+		_qset = qset
+		_drawBoard(instance.name)
+
+
+	# shuffle any array
+	_shuffle = (a) ->
+		for i in [a.length-1..1]
+			j = Math.floor Math.random() * (i + 1)
+			[a[i], a[j]] = [a[j], a[i]]
+		a
+
+	# Draw the main board
+	_drawBoard = (title) ->
+		tBoard = _.template $('#t-board').html()
+		_$board = $(tBoard title: title, categories:_qset.items )
+		# make an array of each category, questions, and count the questions
+		for ci, category of _qset.items
+			_categories[ci] = category
+			for qi, question of category.items
+				question.answers = _shuffle(question.answers) if _qset.options.randomize
+				_totalQuestions++
+				_questions[question.id] = question
+
+		_$board.find('.question').on 'click', _onBoardQuestionClick
+		$('body').append _$board
+
+	# When a Question on the main board is clicked
+	_onBoardQuestionClick = (e) ->
+		# set the current state
+		_$currentQuestionSquare = $(e.target)
+		_currentCat = _categories[_$currentQuestionSquare.parent('.category').data('id')]
+		_currentQuestion = _questions[_$currentQuestionSquare.data('id')]
+		_currentQuestionIndex = parseInt _$currentQuestionSquare.html(), 10
+
+		# Draw the Question Page
+		tQuestion = _.template $('#t-question-page').html()
+		$question = $ tQuestion
+			index: _currentQuestionIndex
+			id: _currentQuestion.id
+			answers: _currentQuestion.answers
+			category: _currentCat.name
+			question: _currentQuestion.questions[0].text
+
+		# setup the button listeners
+		$question.find('.button.return').on 'click', _closeQuestion
+		$question.find('.button.submit').on 'click', _submitAnswer
+		$question.find('.answers input').on 'click', (e) ->
+			$('.answers li').removeClass 'selected'
+			$(e.target).parent('li').addClass 'selected'
+			$question.find('.button.submit').prop 'disabled', false
+
+		_$board.hide()
+		$('body').append $question
+
+	# Answer submitted by user
+	_submitAnswer = ->
+		$chosenRadio = $(".answers input[type='radio']:checked")
+		chosenAnswer = $chosenRadio.val()
+		answer = _checkAnswer _currentQuestion, chosenAnswer
+		Score.submitQuestionForScoring _currentQuestion.id, answer.text
+		_scores.push answer.score
+		_updateScore()
+
+		# Update the question square
+		newTitle = "#{_currentCat.name} question  ##{_currentQuestionIndex} "
+
+		if answer.score == 100
+			$chosenRadio.parents('li').prepend '<span class="correct mark">&#x2714;</span>'
+			_$currentQuestionSquare
+				.addClass('correct')
+				.html('&#x2714;') # checkmark
+				.attr('title', "#{newTitle} Correct")
+		else
+			$chosenRadio.parents('li').prepend '<span class="wrong mark">X</span>'
+			_$currentQuestionSquare
+				.addClass('wrong')
+				.html('X') # incorrect X
+				.attr('title', "#{newTitle} Wrong")
+
+		# Update the radio list and buttons
+		$(".answers input[type='radio']").prop 'disabled', true
+		$('.button.submit').prop 'disabled', true
+		$('.button.return').addClass 'highlight'
+		$('.answers ul').addClass('answered');
+		$chosenRadio.parents('li').append("<span class=\"feedback\"><strong>Feedback:</strong> #{answer.feedback}</span>") if answer.feedback?
+		_$currentQuestionSquare.removeClass('unanswered').off 'click'
+
+	# Draw the final screen that transitions to the Score Screen
+	_drawFinishScreen = ->
+		tFinish = _.template $('#t-finish-notice').html()
+		$finish = $(tFinish score: _finalScore)
+		$finish.find('button').on 'click', _end
+		_$board.hide();
+		$('body').append $finish
+
+	# Update the score on the main screen
+	_updateScore = ->
+		_finalScore = 0
+		for i in _scores
+			_finalScore += i
+
+		_finalScore = Math.round _finalScore/_totalQuestions
+		$('.score .value').html _finalScore
+
+	# Check the value of the chosen answer
+	_checkAnswer = (question, answerId) ->
+		for answer in question.answers
+			if answer.id == answerId
+				return {
+					score: parseInt(answer.value, 10)
+					text: answer.text
+					feedback: answer.options.feedback
+				}
+
+		throw Error 'Submitted answer not in this questions'
+
+	# Close a Question screen to return to the main board
+	_closeQuestion = ->
+		$('.screen.question').remove()
+		_$board.show()
+		_drawFinishScreen() if _scores.length ==_totalQuestions
+
+	_end = ->
+		Materia.Engine.end()
+
+	#public
+	start: start

data/lib/mako/data/templates/html/_engine/widget.html

@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<title>__DefaultWidget__ Engine</title>
+		<meta charset="utf-8" />
+		<style type="text/css"></style>
+		<script type="text/javascript" src="/js/materia.require.js"></script>
+		<link rel="stylesheet" type="text/css" href="css/widget.css">
+		<script type="text/javascript">
+			require(['enginecore', 'score', 'underscore', 'js/widget'], function(util) {
+				Materia.Engine.start(__DefaultWidgetCondensed__.Engine);
+			});
+		</script>
+	</head>
+	<body>
+
+<script type="text/template" id="screen-main"><div class="screen main">
+	<h1><%= title %> Engine</h1>
+</div>
+	</body>
+</html>

data/lib/mako/data/templates/html/_score/score_module.php

@@ -0,0 +1,48 @@
+<?php
+/**
+ * {ADD YOUR DOCUMENTATION HERE}
+ *
+ * 
+ *
+ * The widget score module
+ *
+ * @package	    Materia
+ * @subpackage  scoring
+ * @category    Modules
+ * @author      ADD NAME HERE
+ *
+ * @group App
+ * @group Materia
+ * @group Score
+ * @group __DefaultWidget__
+ */
+
+namespace Materia;
+
+class Score_Modules___DefaultWidgetCondensed__ extends Score_Module
+{
+
+	/**
+	 * A basic example of what methods this class should override.
+	 * @param  object $log Any data saved to the server by your widget (usually question or performance data).
+	 * @return [type]      [description]
+	 */
+	// public function check_answer($log)
+	// {
+	// 	if (isset($this->questions[$log->item_id]))
+	// 	{
+	// 		$question = $this->questions[$log->item_id];
+	// 		foreach ($question->answers as $answer)
+	// 		{
+	// 			if ($log->text == $answer['text'])
+	// 			{
+	// 				return $answer['value'];
+	// 				break;
+	// 			}
+	// 		}
+	// 	}
+	// 	
+	// 	return 0;
+	// }
+
+}