def __init__(self, field):
Element.__init__(self, field)
# there is then field.maincontent, field.width, field.height, field.correctx, field.correcty , etc.
self.mainContentElement = TextAreaElement(field.mainContentField)
self.targetXElement = TextElement(field.targetX)
self.targetYElement = TextElement(field.targetY)
self.widthElement = TextElement(field.width)
self.heightElement = TextElement(field.height)
self.toleranceElement = TextElement(field.tolerance)
def __init__(self, parent, idevice):
Block.__init__(self, parent, idevice)
self.mainTextAreaElements = {}
self.mainTextElements = {}
self.clickableAreaElements = []
self.questionOrderChoiceElement = ChoiceElement(
idevice.questionOrderChoiceField)
self.timerChoiceElement = ChoiceElement(idevice.timerChoiceField)
self.titleElement = TextElement(idevice.titleField)
for textAreaFieldName, textAreaFieldVals in idevice.textAreaFieldNames.iteritems(
):
self.mainTextAreaElements[textAreaFieldName] = TextAreaElement(
idevice.textAreaFields[textAreaFieldName])
for textFieldName, textFieldVals in idevice.textFieldNames.iteritems():
self.mainTextElements[textFieldName] = TextElement(
idevice.textFields[textFieldName])
for clickableAreaField in idevice.clickableAreaFields:
newClickableElement = ClickInOrderClickableAreaElement(
clickableAreaField)
self.clickableAreaElements.append(newClickableElement)
def __init__(self, field):
Element.__init__(self, field)
self.textElements = {}
self.textAreaElements = {}
for textFieldName, textFieldDetails in field.textFieldNames.iteritems(
):
self.textElements[textFieldName] = TextElement(
field.textFields[textFieldName])
for textAreaFieldName, textAreaFieldDetails in field.textAreaFieldNames.iteritems(
):
self.textAreaElements[textAreaFieldName] = TextAreaElement(
field.textAreaFields[textAreaFieldName])
def __init__(self, parent, idevice):
Block.__init__(self, parent, idevice)
self.titleElement = TextElement(idevice.titleField)
self.contentElement = TextAreaElement(idevice.content)
self.contentElement.height = 250
self.chanceImageElements = []
#go through all image fields in the list and create an image element linked to that field
for chanceImageField in idevice.chanceImageFields:
newImgElement = ImageElement(chanceImageField)
self.chanceImageElements.append(newImgElement)
self.wordElements = []
self.hintElements = []
#go through all of the word fields and hint fields and create an
for wordIndex, word in enumerate(idevice.wordTextFields):
newWordElement = TextElement(word)
self.wordElements.append(newWordElement)
newHintElement = TextElement(idevice.hintTextFields[wordIndex])
self.hintElements.append(newHintElement)
#make an element for the alphabet
self.alphabetElement = TextElement(idevice.alphabet)
#element for the messages that are shown to the player
self.wrongGuessTextElement = TextAreaElement(self.idevice.wrongGuessMessageField)
self.lostLevelTextElement = TextAreaElement(self.idevice.lostLevelMessageField)
self.levelPassedTextElement = TextAreaElement(self.idevice.levelPasssedMessageField)
self.gameWonTextElement = TextAreaElement(self.idevice.gameWonMessageField)
self.letterButtonStyleElement = TextElement(self.idevice.letterButtonStyle)
self.wrongLetterButtonStyleElement = TextElement(self.idevice.wrongLetterButtonStyle)
self.rightLetterButtonStyleElement = TextElement(self.idevice.rightLetterButtonStyle)
self.hintFieldStyleElement = TextElement(self.idevice.hintFieldStyle)
self.wordAreaStyleElement = TextElement(self.idevice.wordAreaStyle)
self.resetButtonTextElement = TextElement(self.idevice.resetButtonText)
self.resetButtonStyleElement = TextElement(self.idevice.resetButtonStyle)
def __init__(self, parent, idevice):
Block.__init__(self, parent, idevice)
self.mainTextAreaElements = {}
self.mainTextElements = {}
self.clickableAreaElements = []
self.questionOrderChoiceElement = ChoiceElement(idevice.questionOrderChoiceField)
self.timerChoiceElement = ChoiceElement(idevice.timerChoiceField)
self.titleElement = TextElement(idevice.titleField)
for textAreaFieldName, textAreaFieldVals in idevice.textAreaFieldNames.iteritems():
self.mainTextAreaElements[textAreaFieldName] = TextAreaElement(idevice.textAreaFields[textAreaFieldName])
for textFieldName, textFieldVals in idevice.textFieldNames.iteritems():
self.mainTextElements[textFieldName] = TextElement(idevice.textFields[textFieldName])
for clickableAreaField in idevice.clickableAreaFields:
newClickableElement = ClickInOrderClickableAreaElement(clickableAreaField)
self.clickableAreaElements.append(newClickableElement)
def __init__(self, parent, idevice):
Block.__init__(self, parent, idevice)
self.contentElement = TextAreaElement(idevice.content)
self.contentElement.height = 250
self.titleElement = TextElement(idevice.titleField)
self.mainAreaElement = TextAreaElement(idevice.mainArea)
self.mainAreaElement.height = 200
self.placableObjectElements = []
for placableObjectField in idevice.objectsToPlace:
newPlacableElement = PlacableObjectElement(placableObjectField)
self.placableObjectElements.append(newPlacableElement)
self.positiveResponseElement = TextAreaElement(idevice.positiveResponseArea)
self.negativeResponseElement = TextAreaElement(idevice.negativeResponseArea)
self.clickToStartElement = TextAreaElement(idevice.clickToStartGameArea)
self.gameTimeLimit = TextElement(idevice.gameTimeLimit)
self.gameTimerShown = TextElement(idevice.gameTimerShown)
self.partbinNumCols = TextElement(idevice.partbinNumCols)
def field_engine_build_elements_on_block(fieldInfoDict, fieldDict, idevice):
fieldCounter = 0
elementDict = {}
for fieldInfoKey, fieldInfoArr in fieldInfoDict.items():
elementTypeName = fieldInfoArr[EXEFIELDINFO_TYPE]
#check the field - if this is a new one or src code edit etc. then add this field...
field_engine_check_field(fieldInfoKey, fieldInfoDict, fieldDict,
idevice)
newElement = ""
if elementTypeName == 'image':
newElement = ImageElement(fieldDict[fieldInfoKey])
elif elementTypeName == 'text':
newElement = TextElement(fieldDict[fieldInfoKey])
elif elementTypeName == 'textarea':
newElement = TextAreaElement(fieldDict[fieldInfoKey])
elif elementTypeName == 'choice':
newElement = ChoiceElement(fieldDict[fieldInfoKey])
if newElement != "":
elementDict[fieldInfoKey] = newElement
return elementDict
class PlaceTheObjectsBlockInc(Block):
"""
ExampleBlock can render and process ExampleIdevices as XHTML
GenericBlock will replace it..... one day
"""
def __init__(self, parent, idevice):
Block.__init__(self, parent, idevice)
self.contentElement = TextAreaElement(idevice.content)
self.contentElement.height = 250
self.titleElement = TextElement(idevice.titleField)
self.mainAreaElement = TextAreaElement(idevice.mainArea)
self.mainAreaElement.height = 200
self.placableObjectElements = []
for placableObjectField in idevice.objectsToPlace:
newPlacableElement = PlacableObjectElement(placableObjectField)
self.placableObjectElements.append(newPlacableElement)
self.positiveResponseElement = TextAreaElement(idevice.positiveResponseArea)
self.negativeResponseElement = TextAreaElement(idevice.negativeResponseArea)
self.clickToStartElement = TextAreaElement(idevice.clickToStartGameArea)
self.gameTimeLimit = TextElement(idevice.gameTimeLimit)
self.gameTimerShown = TextElement(idevice.gameTimerShown)
self.partbinNumCols = TextElement(idevice.partbinNumCols)
def process(self, request):
"""
Process the request arguments from the web server to see if any
apply to this block
"""
Block.process(self, request)
self.idevice.uploadNeededScripts()
if "addPlacableObject" + unicode(self.id) in request.args:
self.idevice.addPlacableObject()
self.idevice.edit = True
self.idevice.undo = False
if "checktimer" + unicode(self.id) in request.args:
if "enabletimer" + unicode(self.id) in request.args:
self.idevice.gameTimerShown.content = True
else:
self.idevice.gameTimerShown.content = False
self.titleElement.process(request)
self.idevice.title = self.titleElement.renderView()
self.contentElement.process(request)
self.mainAreaElement.process(request)
self.positiveResponseElement.process(request)
self.negativeResponseElement.process(request)
self.clickToStartElement.process(request)
self.gameTimeLimit.process(request)
self.partbinNumCols.process(request)
for placableObjectElement in self.placableObjectElements:
placableObjectElement.process(request)
def _makeObjectDivId(self, elementTypeName, placeableObjectElement):
"""
Makes an id for a div that is the drag or drop element
as specified by elementTypeName = draggable | droppable
for placeableObjectElement
"""
objectdivid = "placetheobjects" + self.id + "_" + elementTypeName + placeableObjectElement.id
return objectdivid
def _renderForGame(self, style, previewMode = False):
"""
Renders the block as the script and XHTML elements that will be needed in order
to make this run as a game
"""
viewModeStr = "view"
scriptPrefix = ""
if previewMode == True:
scriptPrefix = "resources/"
viewModeStr = "preview"
html = "<script src='%sjquery-ui-1.10.3.custom.min.js' type='text/javascript'></script>\n" % scriptPrefix
html += "<script src='%splacetheobjects.js' type='text/javascript'></script>\n" % scriptPrefix
html += common.ideviceHeader(self, style, viewModeStr)
#this shows the instructions
html += self.contentElement.renderView()
"""
Here we make the droppable target divs
"""
for placeableObjectElement in self.placableObjectElements:
borderStr = ""
if previewMode == True:
borderStr = "border: 1px solid red;"
tolerance = int(placeableObjectElement.toleranceElement.renderView())
html += """<div id='%(droppableid)s' class='placeTheObjectTargetClass%(gameId)s' style='position: absolute;
margin-left: %(marginleft)dpx; margin-top: %(margintop)dpx;
width: %(width)dpx; height: %(height)dpx; %(borderstr)s '>
</div>
""" % { "droppableid" : self._makeObjectDivId("droppable", placeableObjectElement), \
"marginleft" : int(placeableObjectElement.targetXElement.renderView()) - tolerance, \
"margintop" : int(placeableObjectElement.targetYElement.renderView()) - tolerance, \
"width": int(placeableObjectElement.widthElement.renderView()) + (tolerance * 2), \
"height": int(placeableObjectElement.heightElement.renderView()) + (tolerance * 2), \
"borderstr": borderStr, "gameId" : str(self.id) }
"""+ve/-ve feedback areas"""
html += "<div id='placetheobjects_" + self.id +"_positivefeedback'" \
+" style='position: absolute; z-index: 1; '>"
if previewMode == True:
html += self.positiveResponseElement.renderPreview()
else:
html += self.positiveResponseElement.renderView()
html += "</div>"
html += "<div id='placetheobjects_" + self.id + "_negativefeedback' " \
+ "style='position: absolute; z-index: 1;'>"
if previewMode == True:
html += self.negativeResponseElement.renderPreview()
else:
html += self.negativeResponseElement.renderView()
html += "</div>"
"""What to click to start the game"""
html += "<div id='placetheobjects_" + self.id + "_clicktostart' style='position: " \
+ "absolute; cursor: pointer; z-index: 3' onclick='startPlaceGame(\"" + self.id + "\")'>"
if previewMode == True:
html += self.clickToStartElement.renderPreview()
else:
html += self.clickToStartElement.renderView()
html += "</div>"
"""
This is the main area background where the elements are going to be dropped...
"""
html += "<div style='z-index: -4;' id='placetheobjects_" + self.id + "_main'>"
if previewMode == True:
html += self.mainAreaElement.renderPreview()
else:
html += self.mainAreaElement.renderView()
html += "</div>"
"""
Here we make the part bin that will contain the elements that will be dragged
and dropped in place
"""
html += "<div id='placetheobjects" + self.id + "_partbin'>\n"
html += "<table cellpadding='2' cellspacing='2'>"
numCols = int(self.partbinNumCols.renderView())
html += "<!-- num cols = " + str(numCols) + "-->"
colCount = 0
elementCount = 0
for placeableObjectElement in self.placableObjectElements:
if elementCount % numCols == 0:
#we need to make a new row...
if elementCount > 0:
html += "</tr>"
html += "<tr>"
idname = self._makeObjectDivId("draggable", placeableObjectElement)
elementDimensions = {"width" : int(placeableObjectElement.widthElement.renderView()), \
"height" : int(placeableObjectElement.heightElement.renderView()) }
html += "<td style='width: %(width)dpx; height: $(height)spx;'>"
html += "<div id='" + idname + "' onclick=\"objectPlacePickupElement('%(gameid)s', '%(draggableid)s')\" style='cursor: pointer; " \
% {"gameid" : str(self.id), "draggableid" : idname}
html += "width: %(width)dpx; height: %(height)dpx; overflow: hidden; z-index: 1;'>\n" \
% elementDimensions
html += placeableObjectElement.mainContentElement.renderView()
html += "</div>\n"
html += "</td>"
elementCount += 1
html += "</tr></table>"
html += "</div>\n"
html += "<!-- Javascript Code Generated by placetheobjectsblock.py - DO NOT MODIFY -->\n"
html += "<script type='text/javascript'>\n"
html +="initPlaceTheObjectsGameData('" + self.id + "');\n"
html += "placeTheObjectsGameData['" + self.id + "']['showtimer'] = '" + str(self.gameTimerShown.field.content) + "';\n"
html += "placeTheObjectsGameData['" + self.id + "']['timelimit'] = '" + str(self.gameTimeLimit.field.content) + "';\n"
for placeableObjectElement in self.placableObjectElements:
draggable_id = self._makeObjectDivId("draggable", placeableObjectElement)
droppable_id = self._makeObjectDivId("droppable", placeableObjectElement)
perItemCode = """
if(exe_isTouchScreenDev == false) {
$(function() {
$("#%(draggableid)s").draggable({
revert : 'invalid',
start: function(event, ui) {
placeObjectReadyTarget("%(droppableid)s");
},
stop: function (event, ui) {
placeObjectHideTarget("%(droppableid)s");
setTimeout('checkObjectPlaceOK("%(gameId)s", "%(draggableid)s")', 300);
}
}
);
$("#%(droppableid)s").droppable({
accept: "#%(draggableid)s",
activeClass: "ui-state-hover",
hoverClass: "ui-state-active",
drop: function(event, ui) {
$("#%(draggableid)s").effect("pulsate", {}, "fast");
objectPlaceOK("%(gameId)s", "%(draggableid)s");
}
});
});
document.getElementById("%(draggableid)s").onclick = null;
}
placeTheObjectsGameData['%(gameId)s']['elements']['%(draggableid)s'] = new Array();
placeTheObjectsGameData['%(gameId)s']['elements']['%(draggableid)s']['status'] = 'notplaced';
placeTheObjectsGameData['%(gameId)s']['elements']['%(draggableid)s']['bounds'] = new Array(%(targetx)s, %(targety)s, %(width)s, %(height)s );
""" % { "draggableid" : draggable_id, "droppableid" : droppable_id, "gameId" : str(self.id), \
"targetx": placeableObjectElement.targetXElement.renderView() , "targety" : placeableObjectElement.targetYElement.renderView(),\
"width" : placeableObjectElement.widthElement.renderView(), "height" : placeableObjectElement.heightElement.renderView() }
html += perItemCode
html += "</script>\n"
html += common.ideviceFooter(self, style, viewModeStr)
return html
def renderEdit(self, style):
"""
Returns an XHTML string with the form element for editing this block
"""
html = u"<div>\n"
html += self.titleElement.renderEdit()
html += self.contentElement.renderEdit()
html += self.mainAreaElement.renderEdit()
html +=u"<strong>"+_("Game Options") +"</strong>"
html += self.clickToStartElement.renderEdit()
html += self.positiveResponseElement.renderEdit()
html += self.negativeResponseElement.renderEdit()
html += self.partbinNumCols.renderEdit()
"""
Timer Options
"""
html += "<input type='hidden' name='checktimer%s' value='true'/>" % self.id
html += common.checkbox("enabletimer%s" % self.id, self.idevice.gameTimerShown.content, \
title=_("Enable Timer"), instruction=_("Enable showing the timer in the game"))
html += self.gameTimeLimit.renderEdit()
for placableObjectElement in self.placableObjectElements:
html += placableObjectElement.renderEdit()
html += "<br/>"
html += common.submitButton("addPlacableObject"+unicode(self.id), _("Add Placable Object"))
html += "<br/>"
html += self.renderEditButtons()
html += u"</div>\n"
return html
def renderPreview(self, style):
"""
Returns an XHTML string for previewing this block
"""
html = self._renderForGame(style, True)
return html
def renderView(self, style):
"""
Returns an XHTML string for viewing this block
"""
html = self._renderForGame(style, previewMode=False)
return html
class ClickInOrderBlockInc(Block):
"""
ClickInOrderBlock renders ClickInOrderIdevice
"""
def __init__(self, parent, idevice):
Block.__init__(self, parent, idevice)
self.mainTextAreaElements = {}
self.mainTextElements = {}
self.clickableAreaElements = []
self.questionOrderChoiceElement = ChoiceElement(idevice.questionOrderChoiceField)
self.timerChoiceElement = ChoiceElement(idevice.timerChoiceField)
self.titleElement = TextElement(idevice.titleField)
for textAreaFieldName, textAreaFieldVals in idevice.textAreaFieldNames.iteritems():
self.mainTextAreaElements[textAreaFieldName] = TextAreaElement(idevice.textAreaFields[textAreaFieldName])
for textFieldName, textFieldVals in idevice.textFieldNames.iteritems():
self.mainTextElements[textFieldName] = TextElement(idevice.textFields[textFieldName])
for clickableAreaField in idevice.clickableAreaFields:
newClickableElement = ClickInOrderClickableAreaElement(clickableAreaField)
self.clickableAreaElements.append(newClickableElement)
def process(self, request):
"""
Process the request arguments from the web server to see if any
apply to this block
"""
self.idevice.message = ""
Block.process(self, request)
self.titleElement.process(request)
self.questionOrderChoiceElement.process(request)
self.timerChoiceElement.process(request)
self.idevice.uploadNeededScripts()
if "addClickableArea" + unicode(self.id) in request.args:
self.idevice.addClickableField()
self.idevice.edit = True
self.idevice.undo = False
for textAreaFieldName, textAreaElement in self.mainTextAreaElements.iteritems():
textAreaElement.process(request)
for textFieldName, textElement in self.mainTextElements.iteritems():
textElement.process(request)
for clickableAreaElement in self.clickableAreaElements:
clickableAreaElement.process(request)
#validate integer fields are actually integers
field_engine_check_fields_are_ints(self.mainTextElements, \
["width", "height", "hintWidth", "hintHeight"], thisIdevice=self.idevice)
def renderXML(self, style):
previewMode = False
xml = ""
xml += "<idevice type=\"clickinorder\" id=\"%s\">\n" % self.idevice.id
xml += "<clickinorderoptions "
if self.questionOrderChoiceElement.renderView() == "1":
xml += " randomizequestions=\"randomizequestions\" "
"""
if self.timerChoiceElement.renderView() == "1":
xml += " timermode = \"%(timerMode)s\" " % \
xml += self.mainTextAreaElements['Instructions'].renderView()
html += '<div id="clickableAreaGameCompleteFeedback' + self.id + '" style="position: absolute; z-index: 3">'
html += self.mainTextAreaElements['CompleteFeedback'].renderPreview() if previewMode \
else self.mainTextAreaElements['CompleteFeedback'].renderView()
html += "</div>"
html += '<div id="clickableAreaPositiveFeedback' + self.id +'" style="position: absolute; z-index: 1">'
html += self.mainTextAreaElements['PositiveFeedback'].renderPreview() if previewMode \
else self.mainTextAreaElements['PositiveFeedback'].renderView()
html += "</div>"
html += '<div id="clickableAreaNegativeFeedback' + self.id +'" style="position: absolute; z-index: 2">'
html += self.mainTextAreaElements['NegativeFeedback'].renderPreview() if previewMode \
else self.mainTextAreaElements['NegativeFeedback'].renderView()
html += "</div>"
"""
"""
Renders the code for the game...
"""
def _renderGame(self, style, mode="view"):
previewMode = False
resourcePath = ""
if mode == "preview":
previewMode = True
resourcePath = "resources/"
html = common.ideviceHeader(self, style, mode)
html += \
"""
<script src="%(resourcePath)sjquery-ui-1.10.3.custom.min.js" type="text/javascript"> </script>
<script src="%(resourcePath)sclickinorder.js" type="text/javascript"> </script>
<script type="text/javascript">
var clickInOrderGame%(gameId)s = new ClickInOrder('%(gameId)s');
""" % { 'gameId' : str(self.id), 'resourcePath': resourcePath }
if self.questionOrderChoiceElement.renderView() == "1":
html += "clickInOrderGame%(gameId)s.randomizeQuestions = true;\n" % { 'gameId' : str(self.id) }
if self.timerChoiceElement.renderView() == "1":
html += "clickInOrderGame%(gameId)s.timerMode = %(timerMode)s;\n" % \
{"gameId" : str(self.id), "timerMode" : self.timerChoiceElement.renderView() }
for clickableAreaElement in self.clickableAreaElements:
hideDelayStr = clickableAreaElement.textElements['hideDelay'].renderView()
if len(hideDelayStr) < 1:
hideDelayStr = "0"
html += "clickInOrderGame%(gameId)s.addClickableArea(\"%(clickableId)s\", %(hideDelay)s, %(bounds)s);\n" \
% {'gameId' : str(self.id), 'clickableId' : str(clickableAreaElement.id), \
'hideDelay' : int(hideDelayStr),\
'bounds' : "new Array(" + clickableAreaElement.textElements['left'].renderView() + "," \
+ clickableAreaElement.textElements['top'].renderView() + ","
+ clickableAreaElement.textElements['width'].renderView() + ","
+ clickableAreaElement.textElements['height'].renderView() +")"}
html += "</script>\n"
if previewMode == True:
html += self.mainTextAreaElements['Instructions'].renderPreview()
else:
html += self.mainTextAreaElements['Instructions'].renderView()
html += '<div id="clickableAreaGameCompleteFeedback' + self.id + '" style="position: absolute; z-index: 3">'
if previewMode == True:
html +=self.mainTextAreaElements['CompleteFeedback'].renderPreview()
else:
html += self.mainTextAreaElements['CompleteFeedback'].renderView()
html += "</div>"
html += '<div id="clickableAreaPositiveFeedback' + self.id +'" style="position: absolute; z-index: 1">'
if previewMode == True:
html += self.mainTextAreaElements['PositiveFeedback'].renderPreview()
else:
html += self.mainTextAreaElements['PositiveFeedback'].renderView()
html += "</div>"
html += '<div id="clickableAreaNegativeFeedback' + self.id +'" style="position: absolute; z-index: 2">'
if previewMode == True:
html += self.mainTextAreaElements['NegativeFeedback'].renderPreview()
else:
html += self.mainTextAreaElements['NegativeFeedback'].renderView()
html += "</div>"
if self.timerChoiceElement.renderView() == "1":
html += '<input id="clickinordertimer' + self.id + '" style="' + \
self.mainTextElements['timerStyle'].renderView() + ' "/>\n'
for clickableAreaElement in self.clickableAreaElements:
posStyleTopLeft = "position: absolute; margin-left: %(left)spx; margin-top: %(top)spx; z-index: 2; " \
% { 'left' : clickableAreaElement.textElements['left'].renderView(), \
'top' : clickableAreaElement.textElements['top'].renderView() }
posStyleWidthHeight = "height: %(height)spx; width: %(width)spx; " % \
{ 'width' : clickableAreaElement.textElements['width'].renderView(), \
'height' : clickableAreaElement.textElements['height'].renderView() }
divDictArgs = { 'gameId' : str(self.id), \
'clickableAreaId' : str(clickableAreaElement.id), \
'posStyle' : posStyleTopLeft, \
'posStyleWH' : posStyleWidthHeight }
html += """<div id="clickableArea_%(gameId)s_%(clickableAreaId)s" style="%(posStyle)s %(posStyleWH)s "
onclick="clickInOrderGame%(gameId)s.checkClick(\'%(clickableAreaId)s\')"> </div>""" \
% divDictArgs
html += '<div id="clickableAreaShowMe_%(gameId)s_%(clickableAreaId)s" style="%(posStyle)s">' \
% divDictArgs
if previewMode == True:
html += clickableAreaElement.textAreaElements['ShowMe'].renderPreview()
else:
html += clickableAreaElement.textAreaElements['ShowMe'].renderView()
html += '</div>'
#the click to start area
gameSizeArgs = { 'gameId' : str(self.id), \
'width' : self.mainTextElements['width'].renderView() ,\
'height' : self.mainTextElements['height'].renderView()}
html += """<div id=\"clickinordercontainer%(gameId)s\" style=\"width: %(width)spx; height: %(height)spx; overflow: hidden;\"
>""" \
% gameSizeArgs
html += """<div id="clickinorderstartarea%(gameId)s\" onclick="clickInOrderGame%(gameId)s.startGame()"
style=\"width: %(width)spx; height: %(height)spx; position: absolute;\">""" \
% gameSizeArgs
if previewMode == True:
html += self.mainTextAreaElements['ClickToStartArea'].renderPreview()
else:
html += self.mainTextAreaElements['ClickToStartArea'].renderView()
html += "</div>"
#the main area
html += """<div id="clickinordermainarea%(gameId)s" onclick="clickInOrderGame%(gameId)s.validateClick"
style=\"width: %(width)spx; height: %(height)spx; position: absolute;\">""" \
% gameSizeArgs
if previewMode == True:
html += self.mainTextAreaElements['MainArea'].renderPreview()
else:
html += self.mainTextAreaElements['MainArea'].renderView()
html += "</div>"
html += "</div>"
#the hints
html += "<div id=\"clickInOrderHints" + self.id + "\" style=\"" \
+ "width: " + self.mainTextElements['hintWidth'].renderView() + "px; " \
+ "height: " + self.mainTextElements['hintHeight'].renderView() + "px; " \
+ self.mainTextElements['hintAreaStyle'].renderView() + "\">\n"
for clickableAreaElement in self.clickableAreaElements:
html += "<div id=\"clickableAreaInstruction_%(gameId)s_%(clickableAreaId)s\" style=\"position: absolute\">" \
% { 'gameId' : str(self.id), 'clickableAreaId' : str(clickableAreaElement.id) }
if previewMode == True:
html += clickableAreaElement.textAreaElements['Hint'].renderPreview()
else:
html += clickableAreaElement.textAreaElements['Hint'].renderView()
html += "</div>\n"
html += "</div>"
html += '<input id="clickinordercounter' + self.id + '" style="' + \
self.mainTextElements['elementCounterStyle'].renderView() +' " value="1"/>\n'
html += "<script type=\"text/javascript\">clickInOrderGame%(gameId)s.init();</script>\n" % { 'gameId': str(self.id) }
html += common.ideviceFooter(self, style, mode)
return html
def renderEdit(self, style):
"""
Returns an XHTML string with the form element for editing this block
"""
html = u"<div>\n"
html += common.ideviceShowEditMessage(self)
html += \
_("""
<h2>Click The Elements in Order Game</h2>
<p>
This builds a Javascript game where the player has to click on a certain place on the main area according to the hint.
When they click correctly the positive feedback will come and the game will advance. When they click the wrong
area negative feedback will be shown. When they click on the correct area an item can be revealed there. A delay
can be set to make the item disappear if desired after a delay.
</p>
""")
html += self.titleElement.renderEdit()
for textAreaFieldName, textAreaElement in self.mainTextAreaElements.iteritems():
html += textAreaElement.renderEdit()
#for textFieldName, textElement in self.mainTextElements.iteritems():
# html += textElement.renderEdit()
for textFieldName in self.idevice.textFieldsBasic:
html += self.mainTextElements[textFieldName].renderEdit()
divId = "fieldtype_advanced" + self.id
html += "<input name='showbox" + divId + "' type='checkbox' onchange='$(\"#" + divId + "\").toggle()'/>"
html += _("Show advanced options") + "<br/>"
html += "<div id='" + divId + "' style='display: none' "
html += ">"
for textFieldName in self.idevice.textFieldsAdvanced:
html += self.mainTextElements[textFieldName].renderEdit()
html += "</div>"
html += "<br/>"
html += self.questionOrderChoiceElement.renderEdit()
html += self.timerChoiceElement.renderEdit()
html += _("<h2>Clickable Areas</h2>")
for clickableAreaElement in self.clickableAreaElements:
html += clickableAreaElement.renderEdit()
html += "<br/>"
html += common.submitButton("addClickableArea"+unicode(self.id), _("Add Clickable Area"))
html += "<br/>"
html += self.renderEditButtons()
html += u"</div>\n"
return html
def renderPreview(self, style):
"""
Returns an XHTML string for previewing this block
"""
html = ""
html += self._renderGame(style, "preview")
return html
def renderView(self, style):
"""
Returns an XHTML string for viewing this block
"""
html = ""
html += self._renderGame(style, "view")
return html
class HangmanBlockInc(Block):
"""
ExampleBlock can render and process ExampleIdevices as XHTML
GenericBlock will replace it..... one day
"""
def __init__(self, parent, idevice):
Block.__init__(self, parent, idevice)
self.titleElement = TextElement(idevice.titleField)
self.contentElement = TextAreaElement(idevice.content)
self.contentElement.height = 250
self.chanceImageElements = []
#go through all image fields in the list and create an image element linked to that field
for chanceImageField in idevice.chanceImageFields:
newImgElement = ImageElement(chanceImageField)
self.chanceImageElements.append(newImgElement)
self.wordElements = []
self.hintElements = []
#go through all of the word fields and hint fields and create an
for wordIndex, word in enumerate(idevice.wordTextFields):
newWordElement = TextElement(word)
self.wordElements.append(newWordElement)
newHintElement = TextElement(idevice.hintTextFields[wordIndex])
self.hintElements.append(newHintElement)
#make an element for the alphabet
self.alphabetElement = TextElement(idevice.alphabet)
#element for the messages that are shown to the player
self.wrongGuessTextElement = TextAreaElement(self.idevice.wrongGuessMessageField)
self.lostLevelTextElement = TextAreaElement(self.idevice.lostLevelMessageField)
self.levelPassedTextElement = TextAreaElement(self.idevice.levelPasssedMessageField)
self.gameWonTextElement = TextAreaElement(self.idevice.gameWonMessageField)
self.letterButtonStyleElement = TextElement(self.idevice.letterButtonStyle)
self.wrongLetterButtonStyleElement = TextElement(self.idevice.wrongLetterButtonStyle)
self.rightLetterButtonStyleElement = TextElement(self.idevice.rightLetterButtonStyle)
self.hintFieldStyleElement = TextElement(self.idevice.hintFieldStyle)
self.wordAreaStyleElement = TextElement(self.idevice.wordAreaStyle)
self.resetButtonTextElement = TextElement(self.idevice.resetButtonText)
self.resetButtonStyleElement = TextElement(self.idevice.resetButtonStyle)
def process(self, request):
"""
Process the request arguments from the web server to see if any
apply to this block
"""
#Make sure that we don't do anything when it's time to die...
Block.process(self, request)
self.idevice.message = ""
if field_engine_is_delete_request(request):
return
self.idevice.addGameScript()
self.titleElement.process(request)
self.idevice.title = self.titleElement.renderView()
self.alphabetElement.process(request)
self.wrongGuessTextElement.process(request)
self.lostLevelTextElement.process(request)
self.levelPassedTextElement.process(request)
self.gameWonTextElement.process(request)
self.letterButtonStyleElement.process(request)
self.wrongLetterButtonStyleElement.process(request)
self.rightLetterButtonStyleElement.process(request)
self.hintFieldStyleElement.process(request)
self.wordAreaStyleElement.process(request)
self.resetButtonTextElement.process(request)
self.resetButtonStyleElement.process(request)
#see if we need to delete a word
blankWords = False
for wordIndex in range(0, len(self.wordElements)):
if self.wordElements[wordIndex].renderView() == "":
blankWords = True
elif self.hintElements[wordIndex].renderView() == "":
blankWords = True
if blankWords is True:
self.idevice.message = _("One or more words or hints are blank. Please do not have any blank hints or words - you can delete unused ones.")
self.idevice.edit = True
#see if we need to add another chance
if ("addChance"+unicode(self.id)) in request.args:
self.idevice.addChance()
self.idevice.edit = True
# disable Undo once a question has been added:
self.idevice.undo = False
if("addWord"+unicode(self.id)) in request.args:
self.idevice.addWord()
self.idevice.edit = True
self.idevice.undo = False
content = self.contentElement.process(request)
for imgElement in self.chanceImageElements:
imgElement.process(request)
if "action" in request.args and request.args["action"][0] == imgElement.id:
self.idevice.chanceImageFields.remove(imgElement.field)
imgElement.field.idevice.undo = False
imgElement.field.idevice.edit = True
for wordElement in self.wordElements:
wordElement.process(request)
if "action" in request.args and request.args["action"][0] == wordElement.id:
wordIdx = self.wordElements.index(wordElement)
self.idevice.wordTextFields.remove(wordElement.field)
self.idevice.hintTextFields.remove(self.hintElements[wordIdx].field)
wordElement.field.idevice.undo = False
wordElement.field.idevice.edit = True
for hintElement in self.hintElements:
hintElement.process(request)
if content:
self.idevice.content = content
#
# Get an TextArea render back according to mode
def _renderHTMLElement(self, mode, element, containerId = None):
retVal = ""
idStr = ""
if containerId is not None:
idStr = " id='%s' " % containerId
retVal += "<div %s >" % idStr
if mode == "preview":
retVal += element.renderPreview()
else:
retVal += element.renderView()
retVal += "</div>"
return retVal
#
# This will generate the HTML elements and javascript that will be required
# for this to be shown as a Javascript game in the web browser
#
def _renderGame(self, style, mode = "view"):
hangmanGameId = "hangman" + self.id
resPath = ""
if mode == "preview":
resPath = "/templates/"
html = u"<script src='" + resPath + "hangman.js' type='text/javascript'></script>\n"
html += common.ideviceHeader(self, style, mode)
html += "<div id='hangman%(gameId)smessageStore' style='display: none'>" % {"gameId" : hangmanGameId}
html += self._renderHTMLElement(mode, self.wrongGuessTextElement, "hmwrong" + hangmanGameId)
html += self._renderHTMLElement(mode, self.lostLevelTextElement, "hmlost" + hangmanGameId)
html += self._renderHTMLElement(mode, self.levelPassedTextElement, "hmpassed" + hangmanGameId)
html += self._renderHTMLElement(mode, self.gameWonTextElement, "hmwon" + hangmanGameId)
html += "</div>"
html += u"<script type='text/javascript'>\n"
#Go through the images and find out the max height and maxwidth
imgMaxHeight = 0
imgMaxWidth = 0
for imgElement in self.chanceImageElements:
if imgElement.field.imageResource and imgElement.field.imageResource is not None:
if(int(imgElement.field.width) > imgMaxWidth):
imgMaxWidth = int(imgElement.field.width)
if(imgElement.field.height > imgMaxHeight):
imgMaxHeight = int(imgElement.field.height)
#Makes a javascript array of the list of words that the user has given
html += "hangman_words['%s'] = new Array();\n" % hangmanGameId
html += "hangman_buttonStyles['%s'] = new Array();\n" % hangmanGameId
for wordIndex, word in enumerate(self.wordElements):
html += u"hangman_words['%(gameId)s'][%(index)d] = new Array('%(word)s', '%(hint)s');\n" % \
{"index" : wordIndex, "word" : word.renderView(), \
"hint" : self.hintElements[wordIndex].renderView(), \
"gameId" : hangmanGameId }
#make the style for the buttons
html += "hangman_buttonStyles['%(gameId)s'][HANGMAN_BEFORE_GUESS] = \"%(style)s\";\n" \
% {"gameId" : hangmanGameId, "style" : self.letterButtonStyleElement.renderView()}
html += "hangman_buttonStyles['%(gameId)s'][HANGMAN_CORRECT_GUESS] = \"%(style)s\";\n" \
% {"gameId" : hangmanGameId, "style" : self.rightLetterButtonStyleElement.renderView()}
html += "hangman_buttonStyles['%(gameId)s'][HANGMAN_WRONG_GUESS] = \"%(style)s\";\n" \
% {"gameId" : hangmanGameId, "style" : self.wrongLetterButtonStyleElement.renderView()}
#Makes a javscript string of the alphabet that the user can guess from
html += u"hangman_alphabet['%(gameId)s'] = '%(alphabet)s';\n" % \
{"alphabet" : self.alphabetElement.renderView(), \
"gameId" : hangmanGameId }
#Makes an array of the ids of the divs that hold the chance images
html += u"hangman_chanceimgids['%s'] = new Array();\n" % hangmanGameId
for imgIndex, imgElement in enumerate(self.chanceImageElements):
html += "hangman_chanceimgids['%(gameId)s'][%(index)d] = '%(imgdivid)s';\n" % \
{"index" : imgIndex, "imgdivid" : "hangman" + self.id + "img" + imgElement.id, \
"gameId" : hangmanGameId }
#Make the messages for this game
html += u"playerMessages['%s'] = new Array();\n" % hangmanGameId
messagesStr = """
playerMessages['%(gameid)s']['wrongguess'] =
document.getElementById('hmwrong%(gameid)s').innerHTML;
playerMessages['%(gameid)s']['lostlevel'] =
document.getElementById('hmlost%(gameid)s').innerHTML;
playerMessages['%(gameid)s']['levelpassed'] =
document.getElementById('hmpassed%(gameid)s').innerHTML;
playerMessages['%(gameid)s']['gamewon'] =
document.getElementById('hmwon%(gameid)s').innerHTML;
</script>
""" % {"gameid" : hangmanGameId }
html += messagesStr
html += "<div id='hangman" + self.id + "_img'>"
#render view of these images
for imgElement in self.chanceImageElements:
if imgElement.field.imageResource and imgElement.field.imageResource is not None:
html += "<div id='hangman" + self.id + "img" + imgElement.id + "' style='display: none'>"
if mode == "view":
html += imgElement.renderView()
else:
html += imgElement.renderPreview()
html += "</div>"
html += "</div>"
messageTopMargin = (imgMaxHeight - 30) / 2
gameWidth = max(600, imgMaxWidth)
gameAreaHTML = """
<div id="%(gameId)s_gamearea" style='width: %(width)dpx;' class='exehangman_gamearea'>
<div class='exehangman_alertarea' id="%(gameId)s_alertarea" style='position: absolute; z-index: 10; text-align: center; border: 1px; background-color: white; width: %(width)dpx; margin-top: %(messagetopmargin)dpx; visibility: hidden'>
 
</div>
<div id="%(gameId)s_imgarea" style='height: %(height)dpx; z-index: 1;' class='exehangman_imgarea'>
</div>
<input type='text' style='%(hintStyle)s' id='%(gameId)s_hintarea' style='width: %(width)dpx' class='exehangman_hintarea'/>
<input type='text' style='%(wordStyle)s' id='%(gameId)s_wordarea' style='width: %(width)dpx' class='exehangman_wordarea'/>
<div id="%(gameId)s_letterarea" class='exehangman_letterarea'>
</div>
<input class='exehangman_resetbutton' type='button' value='%(resetText)s' style='%(resetStyle)s' onclick='restartLevel("%(gameId)s")'/>
</div>
""" % { "gameId" : hangmanGameId, "width" : gameWidth, "height": imgMaxHeight, \
"messagetopmargin" : messageTopMargin, 'hintStyle' : self.hintFieldStyleElement.renderView(), \
'wordStyle' : self.wordAreaStyleElement.renderView(), 'resetText' : self.resetButtonTextElement.renderView(), \
'resetStyle' : self.resetButtonStyleElement.renderView() }
html += gameAreaHTML
html += "<script type='text/javascript'>setupGame('%s');</script>" % hangmanGameId
return html
def renderEdit(self, style):
"""
Returns an XHTML string with the form element for editing this block
"""
html = u"<div>\n"
html += common.ideviceShowEditMessage(self)
html += self.titleElement.renderEdit()
html += self.contentElement.renderEdit()
html += self.alphabetElement.renderEdit()
#messages to show the user for different events
html += self.wrongGuessTextElement.renderEdit()
html += self.lostLevelTextElement.renderEdit()
html += self.levelPassedTextElement.renderEdit()
html += self.gameWonTextElement.renderEdit()
html += self.resetButtonTextElement.renderEdit()
divId = "fieldtype_advanced" + self.id
html += "<input name='showbox" + divId + "' type='checkbox' onchange='$(\"#" + divId + "\").toggle()'/>"
html += _("Show Advanced Options") + "<br/>"
html += "<div id='" + divId + "' style='display: none' "
html += ">"
#styles for buttons
html += self.letterButtonStyleElement.renderEdit()
html += self.wrongLetterButtonStyleElement.renderEdit()
html += self.rightLetterButtonStyleElement.renderEdit()
#style of the text fields
html += self.hintFieldStyleElement.renderEdit()
html += self.wordAreaStyleElement.renderEdit()
html += self.resetButtonStyleElement.renderEdit()
html += "</div>"
#render edit of these images
for imgElement in self.chanceImageElements:
html += imgElement.renderEdit()
html += common.submitImage(imgElement.id, imgElement.field.idevice.id,
"/images/stock-cancel.png",
_("Remove This Life")) + "<br/>"
addChanceButtonLabel = _("Add Chance")
html += common.submitButton("addChance"+unicode(self.id), addChanceButtonLabel)
html += "<br/>"
#show words to be guessed
html += _("<h2>Words to Guess</h2>")
for wordIndex in range(0, len(self.wordElements)):
word = self.wordElements[wordIndex]
html += word.renderEdit()
html += self.hintElements[wordIndex].renderEdit()
html += "<br/>"
if wordIndex > 0:
html += common.submitImage(word.id, word.field.idevice.id,
"/images/stock-cancel.png",
_("Remove This Word")) + "<br/>"
html += common.submitButton("addWord"+unicode(self.id), _("Add Word"))
html += "<br/>"
html += self.renderEditButtons()
html += u"</div>\n"
return html
def renderPreview(self, style):
"""
Returns an XHTML string for previewing this block
"""
html = u"<div class=\"iDevice "
html += u"emphasis"+unicode(self.idevice.emphasis)+"\" "
html += u"ondblclick=\"submitLink('edit',"+self.id+", 0);\">\n"
html += self.contentElement.renderView()
html += self._renderGame(style, mode = "preview")
html += self.renderViewButtons()
html += "</div>\n"
return html
def renderXML(self, style):
xml = u""
mediaConverter = ExportMediaConverter.getInstance()
width = mediaConverter.getProfileWidth()
height = mediaConverter.getProfileHeight()
if mediaConverter is not None:
for imgElement in self.chanceImageElements:
if imgElement.field.imageResource is not None:
mediaConverter.resizeImg(XMLPage.currentOutputDir/imgElement.field.imageResource.storageName, \
width, height, {}, {"resizemethod" : "stretch"})
xml += "<idevice type='hangman' id='%s'>\n" % self.idevice.id
xml += "<chanceimages>\n"
for imgElement in self.chanceImageElements:
if imgElement.field.imageResource is not None:
xml += "<img src='%s'/>\n" % imgElement.field.imageResource.storageName
xml += "</chanceimages>\n"
xml += "<alphabet>%s</alphabet>\n" % self.alphabetElement.renderView()
xml += "<wrongguessmessage><![CDATA[ %s ]]></wrongguessmessage>\n" % self.wrongGuessTextElement.renderView()
xml += "<lostlevelmessage><![CDATA[ %s ]]></lostlevelmessage>\n" % self.lostLevelTextElement.renderView()
xml += "<levelpassedmessage><![CDATA[ %s ]]></levelpassedmessage>\n" % self.levelPassedTextElement.renderView()
xml += "<gamewonmessage><![CDATA[ %s ]]></gamewonmessage>\n" % self.gameWonTextElement.renderView()
xml += "<words>"
for wordIndex in range(0, len(self.wordElements)):
word = self.wordElements[wordIndex]
if word != "":
xml += "<word>\n<hint>%(hint)s</hint>\n<answer>%(answer)s</answer>\n</word>\n" \
% {"answer" : word.renderView() , "hint" : self.hintElements[wordIndex].renderView()}
xml += "</words>\n"
xml += "</idevice>\n"
return xml
def renderView(self, style):
"""
Returns an XHTML string for viewing this block
"""
html = u"<div class=\"iDevice "
html += u"emphasis"+unicode(self.idevice.emphasis)+"\">\n"
html += self.contentElement.renderView()
html += self._renderGame(style, mode = "view")
html += u"</div>\n"
return html
class HangmanBlockInc(Block):
"""
ExampleBlock can render and process ExampleIdevices as XHTML
GenericBlock will replace it..... one day
"""
def __init__(self, parent, idevice):
Block.__init__(self, parent, idevice)
self.titleElement = TextElement(idevice.titleField)
self.contentElement = TextAreaElement(idevice.content)
self.contentElement.height = 250
self.chanceImageElements = []
#go through all image fields in the list and create an image element linked to that field
for chanceImageField in idevice.chanceImageFields:
newImgElement = ImageElement(chanceImageField)
self.chanceImageElements.append(newImgElement)
self.wordElements = []
self.hintElements = []
#go through all of the word fields and hint fields and create an
for wordIndex, word in enumerate(idevice.wordTextFields):
newWordElement = TextElement(word)
self.wordElements.append(newWordElement)
newHintElement = TextElement(idevice.hintTextFields[wordIndex])
self.hintElements.append(newHintElement)
#make an element for the alphabet
self.alphabetElement = TextElement(idevice.alphabet)
#element for the messages that are shown to the player
self.wrongGuessTextElement = TextAreaElement(self.idevice.wrongGuessMessageField)
self.lostLevelTextElement = TextAreaElement(self.idevice.lostLevelMessageField)
self.levelPassedTextElement = TextAreaElement(self.idevice.levelPasssedMessageField)
self.gameWonTextElement = TextAreaElement(self.idevice.gameWonMessageField)
self.letterButtonStyleElement = TextElement(self.idevice.letterButtonStyle)
self.wrongLetterButtonStyleElement = TextElement(self.idevice.wrongLetterButtonStyle)
self.rightLetterButtonStyleElement = TextElement(self.idevice.rightLetterButtonStyle)
self.hintFieldStyleElement = TextElement(self.idevice.hintFieldStyle)
self.wordAreaStyleElement = TextElement(self.idevice.wordAreaStyle)
self.resetButtonTextElement = TextElement(self.idevice.resetButtonText)
self.resetButtonStyleElement = TextElement(self.idevice.resetButtonStyle)
def process(self, request):
"""
Process the request arguments from the web server to see if any
apply to this block
"""
#Make sure that we don't do anything when it's time to die...
Block.process(self, request)
self.idevice.message = ""
if field_engine_is_delete_request(request):
return
self.idevice.addGameScript()
self.titleElement.process(request)
self.idevice.title = self.titleElement.renderView()
self.alphabetElement.process(request)
self.wrongGuessTextElement.process(request)
self.lostLevelTextElement.process(request)
self.levelPassedTextElement.process(request)
self.gameWonTextElement.process(request)
self.letterButtonStyleElement.process(request)
self.wrongLetterButtonStyleElement.process(request)
self.rightLetterButtonStyleElement.process(request)
self.hintFieldStyleElement.process(request)
self.wordAreaStyleElement.process(request)
self.resetButtonTextElement.process(request)
self.resetButtonStyleElement.process(request)
#see if we need to delete a word
blankWords = False
for wordIndex in range(0, len(self.wordElements)):
if self.wordElements[wordIndex].renderView() == "":
blankWords = True
elif self.hintElements[wordIndex].renderView() == "":
blankWords = True
if blankWords is True:
self.idevice.message = _("One or more words or hints are blank. Please do not have any blank hints or words - you can delete unused ones.")
self.idevice.edit = True
#see if we need to add another chance
if ("addChance"+unicode(self.id)) in request.args:
self.idevice.addChance()
self.idevice.edit = True
# disable Undo once a question has been added:
self.idevice.undo = False
if("addWord"+unicode(self.id)) in request.args:
self.idevice.addWord()
self.idevice.edit = True
self.idevice.undo = False
content = self.contentElement.process(request)
for imgElement in self.chanceImageElements:
imgElement.process(request)
if "action" in request.args and request.args["action"][0] == imgElement.id:
self.idevice.chanceImageFields.remove(imgElement.field)
imgElement.field.idevice.undo = False
imgElement.field.idevice.edit = True
for wordElement in self.wordElements:
wordElement.process(request)
if "action" in request.args and request.args["action"][0] == wordElement.id:
wordIdx = self.wordElements.index(wordElement)
self.idevice.wordTextFields.remove(wordElement.field)
self.idevice.hintTextFields.remove(self.hintElements[wordIdx].field)
wordElement.field.idevice.undo = False
wordElement.field.idevice.edit = True
for hintElement in self.hintElements:
hintElement.process(request)
if content:
self.idevice.content = content
#
# Get an TextArea render back according to mode
def _renderHTMLElement(self, mode, element, containerId = None):
retVal = ""
idStr = ""
if containerId is not None:
idStr = " id='%s' " % containerId
retVal += "<div %s >" % idStr
if mode == "preview":
retVal += element.renderPreview()
else:
retVal += element.renderView()
retVal += "</div>"
return retVal
#
# This will generate the HTML elements and javascript that will be required
# for this to be shown as a Javascript game in the web browser
#
def _renderGame(self, style, mode = "view"):
hangmanGameId = "hangman" + self.id
resPath = ""
if mode == "preview":
resPath = "resources/"
html = u"<script src='" + resPath + "hangman.js' type='text/javascript'></script>\n"
html += common.ideviceHeader(self, style, mode)
html += "<div id='hangman%(gameId)smessageStore' style='display: none'>" % {"gameId" : hangmanGameId}
html += self._renderHTMLElement(mode, self.wrongGuessTextElement, "hmwrong" + hangmanGameId)
html += self._renderHTMLElement(mode, self.lostLevelTextElement, "hmlost" + hangmanGameId)
html += self._renderHTMLElement(mode, self.levelPassedTextElement, "hmpassed" + hangmanGameId)
html += self._renderHTMLElement(mode, self.gameWonTextElement, "hmwon" + hangmanGameId)
html += "</div>"
html += u"<script type='text/javascript'>\n"
#Go through the images and find out the max height and maxwidth
imgMaxHeight = 0
imgMaxWidth = 0
for imgElement in self.chanceImageElements:
if imgElement.field.imageResource and imgElement.field.imageResource is not None:
if(int(imgElement.field.width) > imgMaxWidth):
imgMaxWidth = int(imgElement.field.width)
if(imgElement.field.height > imgMaxHeight):
imgMaxHeight = int(imgElement.field.height)
#Makes a javascript array of the list of words that the user has given
html += "hangman_words['%s'] = new Array();\n" % hangmanGameId
html += "hangman_buttonStyles['%s'] = new Array();\n" % hangmanGameId
for wordIndex, word in enumerate(self.wordElements):
html += u"hangman_words['%(gameId)s'][%(index)d] = new Array('%(word)s', '%(hint)s');\n" % \
{"index" : wordIndex, "word" : word.renderView(), \
"hint" : self.hintElements[wordIndex].renderView(), \
"gameId" : hangmanGameId }
#make the style for the buttons
html += "hangman_buttonStyles['%(gameId)s'][HANGMAN_BEFORE_GUESS] = \"%(style)s\";\n" \
% {"gameId" : hangmanGameId, "style" : self.letterButtonStyleElement.renderView()}
html += "hangman_buttonStyles['%(gameId)s'][HANGMAN_CORRECT_GUESS] = \"%(style)s\";\n" \
% {"gameId" : hangmanGameId, "style" : self.rightLetterButtonStyleElement.renderView()}
html += "hangman_buttonStyles['%(gameId)s'][HANGMAN_WRONG_GUESS] = \"%(style)s\";\n" \
% {"gameId" : hangmanGameId, "style" : self.wrongLetterButtonStyleElement.renderView()}
#Makes a javscript string of the alphabet that the user can guess from
html += u"hangman_alphabet['%(gameId)s'] = '%(alphabet)s';\n" % \
{"alphabet" : self.alphabetElement.renderView(), \
"gameId" : hangmanGameId }
#Makes an array of the ids of the divs that hold the chance images
html += u"hangman_chanceimgids['%s'] = new Array();\n" % hangmanGameId
for imgIndex, imgElement in enumerate(self.chanceImageElements):
html += "hangman_chanceimgids['%(gameId)s'][%(index)d] = '%(imgdivid)s';\n" % \
{"index" : imgIndex, "imgdivid" : "hangman" + self.id + "img" + imgElement.id, \
"gameId" : hangmanGameId }
#Make the messages for this game
html += u"playerMessages['%s'] = new Array();\n" % hangmanGameId
messagesStr = """
playerMessages['%(gameid)s']['wrongguess'] =
document.getElementById('hmwrong%(gameid)s').innerHTML;
playerMessages['%(gameid)s']['lostlevel'] =
document.getElementById('hmlost%(gameid)s').innerHTML;
playerMessages['%(gameid)s']['levelpassed'] =
document.getElementById('hmpassed%(gameid)s').innerHTML;
playerMessages['%(gameid)s']['gamewon'] =
document.getElementById('hmwon%(gameid)s').innerHTML;
</script>
""" % {"gameid" : hangmanGameId }
html += messagesStr
html += "<div id='hangman" + self.id + "_img'>"
#render view of these images
for imgElement in self.chanceImageElements:
if imgElement.field.imageResource and imgElement.field.imageResource is not None:
html += "<div id='hangman" + self.id + "img" + imgElement.id + "' style='display: none'>"
if mode == "view":
html += imgElement.renderView()
else:
html += imgElement.renderPreview()
html += "</div>"
html += "</div>"
messageTopMargin = (imgMaxHeight - 30) / 2
gameWidth = max(600, imgMaxWidth)
gameAreaHTML = """
<div id="%(gameId)s_gamearea" style='width: %(width)dpx;' class='exehangman_gamearea'>
<div class='exehangman_alertarea' id="%(gameId)s_alertarea" style='position: absolute; z-index: 10; text-align: center; border: 1px; background-color: white; width: %(width)dpx; margin-top: %(messagetopmargin)dpx; visibility: hidden'>
 
</div>
<div id="%(gameId)s_imgarea" style='height: %(height)dpx; z-index: 1;' class='exehangman_imgarea'>
</div>
<input type='text' style='%(hintStyle)s' id='%(gameId)s_hintarea' style='width: %(width)dpx' class='exehangman_hintarea'/>
<input type='text' style='%(wordStyle)s' id='%(gameId)s_wordarea' style='width: %(width)dpx' class='exehangman_wordarea'/>
<div id="%(gameId)s_letterarea" class='exehangman_letterarea'>
</div>
<input class='exehangman_resetbutton' type='button' value='%(resetText)s' style='%(resetStyle)s' onclick='restartLevel("%(gameId)s")'/>
</div>
""" % { "gameId" : hangmanGameId, "width" : gameWidth, "height": imgMaxHeight, \
"messagetopmargin" : messageTopMargin, 'hintStyle' : self.hintFieldStyleElement.renderView(), \
'wordStyle' : self.wordAreaStyleElement.renderView(), 'resetText' : self.resetButtonTextElement.renderView(), \
'resetStyle' : self.resetButtonStyleElement.renderView() }
html += gameAreaHTML
html += "<script type='text/javascript'>setupGame('%s');</script>" % hangmanGameId
return html
def renderEdit(self, style):
"""
Returns an XHTML string with the form element for editing this block
"""
html = u"<div>\n"
html += common.ideviceShowEditMessage(self)
html += self.titleElement.renderEdit()
html += self.contentElement.renderEdit()
html += self.alphabetElement.renderEdit()
#messages to show the user for different events
html += self.wrongGuessTextElement.renderEdit()
html += self.lostLevelTextElement.renderEdit()
html += self.levelPassedTextElement.renderEdit()
html += self.gameWonTextElement.renderEdit()
html += self.resetButtonTextElement.renderEdit()
divId = "fieldtype_advanced" + self.id
html += "<input name='showbox" + divId + "' type='checkbox' onchange='$(\"#" + divId + "\").toggle()'/>"
html += _("Show Advanced Options") + "<br/>"
html += "<div id='" + divId + "' style='display: none' "
html += ">"
#styles for buttons
html += self.letterButtonStyleElement.renderEdit()
html += self.wrongLetterButtonStyleElement.renderEdit()
html += self.rightLetterButtonStyleElement.renderEdit()
#style of the text fields
html += self.hintFieldStyleElement.renderEdit()
html += self.wordAreaStyleElement.renderEdit()
html += self.resetButtonStyleElement.renderEdit()
html += "</div>"
#render edit of these images
for imgElement in self.chanceImageElements:
html += imgElement.renderEdit()
html += common.submitImage(imgElement.id, imgElement.field.idevice.id,
"/images/stock-cancel.png",
_("Remove This Life")) + "<br/>"
addChanceButtonLabel = _("Add Chance")
html += common.submitButton("addChance"+unicode(self.id), addChanceButtonLabel)
html += "<br/>"
#show words to be guessed
html += _("<h2>Words to Guess</h2>")
for wordIndex in range(0, len(self.wordElements)):
word = self.wordElements[wordIndex]
html += word.renderEdit()
html += self.hintElements[wordIndex].renderEdit()
html += "<br/>"
if wordIndex > 0:
html += common.submitImage(word.id, word.field.idevice.id,
"/images/stock-cancel.png",
_("Remove This Word")) + "<br/>"
html += common.submitButton("addWord"+unicode(self.id), _("Add Word"))
html += "<br/>"
html += self.renderEditButtons()
html += u"</div>\n"
return html
def renderPreview(self, style):
"""
Returns an XHTML string for previewing this block
"""
html = u"<div class=\"iDevice "
html += u"emphasis"+unicode(self.idevice.emphasis)+"\" "
html += u"ondblclick=\"submitLink('edit',"+self.id+", 0);\">\n"
html += self.contentElement.renderView()
html += self._renderGame(style, mode = "preview")
html += self.renderViewButtons()
html += "</div>\n"
return html
def renderXML(self, style):
xml = u""
mediaConverter = ExportMediaConverter.getInstance()
width = mediaConverter.getProfileWidth()
height = mediaConverter.getProfileHeight()
if mediaConverter is not None:
for imgElement in self.chanceImageElements:
if imgElement.field.imageResource is not None:
mediaConverter.resizeImg(XMLPage.currentOutputDir/imgElement.field.imageResource.storageName, \
width, height, {}, {"resizemethod" : "stretch"})
xml += "<idevice type='hangman' id='%s'>\n" % self.idevice.id
xml += "<chanceimages>\n"
for imgElement in self.chanceImageElements:
if imgElement.field.imageResource is not None:
xml += "<img src='%s'/>\n" % imgElement.field.imageResource.storageName
xml += "</chanceimages>\n"
xml += "<alphabet>%s</alphabet>\n" % self.alphabetElement.renderView()
xml += "<wrongguessmessage><![CDATA[ %s ]]></wrongguessmessage>\n" % self.wrongGuessTextElement.renderView()
xml += "<lostlevelmessage><![CDATA[ %s ]]></lostlevelmessage>\n" % self.lostLevelTextElement.renderView()
xml += "<levelpassedmessage><![CDATA[ %s ]]></levelpassedmessage>\n" % self.levelPassedTextElement.renderView()
xml += "<gamewonmessage><![CDATA[ %s ]]></gamewonmessage>\n" % self.gameWonTextElement.renderView()
xml += "<words>"
for wordIndex in range(0, len(self.wordElements)):
word = self.wordElements[wordIndex]
if word != "":
xml += "<word>\n<hint>%(hint)s</hint>\n<answer>%(answer)s</answer>\n</word>\n" \
% {"answer" : word.renderView() , "hint" : self.hintElements[wordIndex].renderView()}
xml += "</words>\n"
xml += "</idevice>\n"
return xml
def renderView(self, style):
"""
Returns an XHTML string for viewing this block
"""
html = u"<div class=\"iDevice "
html += u"emphasis"+unicode(self.idevice.emphasis)+"\">\n"
html += self.contentElement.renderView()
html += self._renderGame(style, mode = "view")
html += u"</div>\n"
return html
def __init__(self, field, showDelFileButton=True):
Element.__init__(self, field)
self.fileDescriptionElement = TextElement(field.fileDescription)
self.showDelFile = showDelFileButton
class FileElement(Element):
def __init__(self, field, showDelFileButton=True):
Element.__init__(self, field)
self.fileDescriptionElement = TextElement(field.fileDescription)
self.showDelFile = showDelFileButton
"""
Check and see if a new file has been uploaded
or if we need to delete a file on user request
"""
def process(self, request):
self.fileDescriptionElement.process(request)
if "upload" + self.id in request.args:
if "path" + self.id in request.args:
filePath = request.args["path" + self.id][0]
self.field.uploadFile(filePath)
self.field.idevice.edit = True
self.field.idevice.undo = False
if "action" in request.args and request.args["action"][
0] == "delfile" + self.id:
self.field.deleteFile()
self.field.idevice.edit = True
self.field.idevice.undo = False
def renderEdit(self):
html = u"<div>\n"
html += common.textInput("path"+self.id, "", 50, \
onclick="addFile('%s')" % self.id, readonly="readonly" )
html += u'<input type="button" onclick="addFile(\'%s\')"' % self.id
html += u'value="%s" />\n' % _(u"Browse")
buttonName = _(u"Replace")
if self.field.fileResource is None:
buttonName = _(u"Upload")
html += u'<input type="submit" name="%s" value="%s" />' % (
"upload" + self.id, buttonName)
html += common.elementInstruc(self.field.fileInstruc)
html += self.fileDescriptionElement.renderEdit()
if self.field.fileResource is not None:
html += "<div class='block'><strong>"
html += _("File") + ": %s " % self.field.fileResource.storageName
if self.showDelFile:
html += common.submitImage("delfile" + self.id,
self.field.fileResource.storageName,
"/images/stock-cancel.png",
_("Delete File"))
html += "</strong></div>"
else:
html += "<i>" + _("No File Uploaded Currently") + "</i>"
html += "<br/></div>"
html += field_engine_make_delete_button(self)
return html
def renderView(self):
return ""
"""
Return the filename of this item if there is one now
"""
def getFileName(self):
if self.field.fileResource is not None:
return self.field.fileResource.storageName
return ""
"""
Return the description if there is one now
"""
def getDescription(self):
return self.fileDescriptionElement.renderView()
def renderPreview(self):
html = ""
if self.field.fileResource is not None:
html += _(
"Attachment") + ": %s " % self.field.fileResource.storageName
else:
html += _("Attachment") + " : <i>" + _("None") + "</i>"
html += "<br/>"
return html
def __init__(self, parent, idevice):
Block.__init__(self, parent, idevice)
self.titleElement = TextElement(idevice.titleField)
self.contentElement = TextAreaElement(idevice.content)
self.contentElement.height = 250
self.chanceImageElements = []
#go through all image fields in the list and create an image element linked to that field
for chanceImageField in idevice.chanceImageFields:
newImgElement = ImageElement(chanceImageField)
self.chanceImageElements.append(newImgElement)
self.wordElements = []
self.hintElements = []
#go through all of the word fields and hint fields and create an
for wordIndex, word in enumerate(idevice.wordTextFields):
newWordElement = TextElement(word)
self.wordElements.append(newWordElement)
newHintElement = TextElement(idevice.hintTextFields[wordIndex])
self.hintElements.append(newHintElement)
#make an element for the alphabet
self.alphabetElement = TextElement(idevice.alphabet)
#element for the messages that are shown to the player
self.wrongGuessTextElement = TextAreaElement(self.idevice.wrongGuessMessageField)
self.lostLevelTextElement = TextAreaElement(self.idevice.lostLevelMessageField)
self.levelPassedTextElement = TextAreaElement(self.idevice.levelPasssedMessageField)
self.gameWonTextElement = TextAreaElement(self.idevice.gameWonMessageField)
self.letterButtonStyleElement = TextElement(self.idevice.letterButtonStyle)
self.wrongLetterButtonStyleElement = TextElement(self.idevice.wrongLetterButtonStyle)
self.rightLetterButtonStyleElement = TextElement(self.idevice.rightLetterButtonStyle)
self.hintFieldStyleElement = TextElement(self.idevice.hintFieldStyle)
self.wordAreaStyleElement = TextElement(self.idevice.wordAreaStyle)
self.resetButtonTextElement = TextElement(self.idevice.resetButtonText)
self.resetButtonStyleElement = TextElement(self.idevice.resetButtonStyle)
class FileElement(Element):
def __init__(self, field, showDelFileButton = True):
Element.__init__(self, field)
self.fileDescriptionElement = TextElement(field.fileDescription)
self.showDelFile = showDelFileButton
"""
Check and see if a new file has been uploaded
or if we need to delete a file on user request
"""
def process(self, request):
self.fileDescriptionElement.process(request)
if "upload" + self.id in request.args:
if "path" + self.id in request.args:
filePath = request.args["path"+self.id][0]
self.field.uploadFile(filePath)
self.field.idevice.edit = True
self.field.idevice.undo = False
if "action" in request.args and request.args["action"][0] == "delfile"+self.id:
self.field.deleteFile()
self.field.idevice.edit = True
self.field.idevice.undo = False
def renderEdit(self):
html = u"<div>\n"
html += common.textInput("path"+self.id, "", 50, \
onclick="addFile('%s')" % self.id, readonly="readonly" )
html += u'<input type="button" onclick="addFile(\'%s\')"' % self.id
html += u'value="%s" />\n' % _(u"Browse")
buttonName = _(u"Replace")
if self.field.fileResource is None:
buttonName = _(u"Upload")
html += u'<input type="submit" name="%s" value="%s" />' % ("upload"+self.id,
buttonName)
html += common.elementInstruc(self.field.fileInstruc)
html += self.fileDescriptionElement.renderEdit()
if self.field.fileResource is not None:
html += "<div class='block'><strong>"
html += _("File") + ": %s " % self.field.fileResource.storageName
if self.showDelFile:
html += common.submitImage("delfile" + self.id, self.field.fileResource.storageName,
"/images/stock-cancel.png",
_("Delete File"))
html += "</strong></div>"
else:
html += "<i>"+_("No File Uploaded Currently") + "</i>"
html += "<br/></div>"
html += field_engine_make_delete_button(self)
return html
def renderView(self):
return ""
"""
Return the filename of this item if there is one now
"""
def getFileName(self):
if self.field.fileResource is not None:
return self.field.fileResource.storageName
return ""
"""
Return the description if there is one now
"""
def getDescription(self):
return self.fileDescriptionElement.renderView()
def renderPreview(self):
html = ""
if self.field.fileResource is not None:
html += _("Attachment") + ": %s " % self.field.fileResource.storageName
else:
html += _("Attachment") +" : <i>" + _("None") + "</i>"
html += "<br/>"
return html
class HangmanBlockInc(Block):
"""
ExampleBlock can render and process ExampleIdevices as XHTML
GenericBlock will replace it..... one day
"""
def __init__(self, parent, idevice):
Block.__init__(self, parent, idevice)
self.titleElement = TextElement(idevice.titleField)
self.contentElement = TextAreaElement(idevice.content)
self.contentElement.height = 250
self.chanceImageElements = []
#go through all image fields in the list and create an image element linked to that field
for chanceImageField in idevice.chanceImageFields:
newImgElement = ImageElement(chanceImageField)
self.chanceImageElements.append(newImgElement)
self.wordElements = []
self.hintElements = []
#go through all of the word fields and hint fields and create an
for wordIndex, word in enumerate(idevice.wordTextFields):
newWordElement = TextElement(word)
self.wordElements.append(newWordElement)
newHintElement = TextElement(idevice.hintTextFields[wordIndex])
self.hintElements.append(newHintElement)
#make an element for the alphabet
self.alphabetElement = TextElement(idevice.alphabet)
#element for the messages that are shown to the player
self.wrongGuessTextElement = TextAreaElement(self.idevice.wrongGuessMessageField)
self.lostLevelTextElement = TextAreaElement(self.idevice.lostLevelMessageField)
self.levelPassedTextElement = TextAreaElement(self.idevice.levelPasssedMessageField)
self.gameWonTextElement = TextAreaElement(self.idevice.gameWonMessageField)
self.letterButtonStyleElement = TextElement(self.idevice.letterButtonStyle)
self.wrongLetterButtonStyleElement = TextElement(self.idevice.wrongLetterButtonStyle)
self.rightLetterButtonStyleElement = TextElement(self.idevice.rightLetterButtonStyle)
self.hintFieldStyleElement = TextElement(self.idevice.hintFieldStyle)
self.wordAreaStyleElement = TextElement(self.idevice.wordAreaStyle)
self.resetButtonTextElement = TextElement(self.idevice.resetButtonText)
self.resetButtonStyleElement = TextElement(self.idevice.resetButtonStyle)
def process(self, request):
"""
Process the request arguments from the web server to see if any
apply to this block
"""
#Make sure that we don't do anything when it's time to die...
Block.process(self, request)
self.idevice.message = ""
if field_engine_is_delete_request(request):
return
self.idevice.addGameScript()
self.titleElement.process(request)
self.idevice.title = self.titleElement.renderView()
self.alphabetElement.process(request)
self.wrongGuessTextElement.process(request)
self.lostLevelTextElement.process(request)
self.levelPassedTextElement.process(request)
self.gameWonTextElement.process(request)
self.letterButtonStyleElement.process(request)
self.wrongLetterButtonStyleElement.process(request)
self.rightLetterButtonStyleElement.process(request)
self.hintFieldStyleElement.process(request)
self.wordAreaStyleElement.process(request)
self.resetButtonTextElement.process(request)
self.resetButtonStyleElement.process(request)
#see if we need to delete a word
blankWords = False
for wordIndex in range(0, len(self.wordElements)):
if self.wordElements[wordIndex].renderView() == "":
blankWords = True
elif self.hintElements[wordIndex].renderView() == "":
blankWords = True
if blankWords is True:
self.idevice.message = _("One or more words or hints are blank. Please do not have any blank hints or words - you can delete unused ones.")
self.idevice.edit = True
#see if we need to add another chance
if ("addChance"+unicode(self.id)) in request.args:
self.idevice.addChance()
self.idevice.edit = True
# disable Undo once a question has been added:
self.idevice.undo = False
if("addWord"+unicode(self.id)) in request.args:
self.idevice.addWord()
self.idevice.edit = True
self.idevice.undo = False
content = self.contentElement.process(request)
for imgElement in self.chanceImageElements:
imgElement.process(request)
if "action" in request.args and request.args["action"][0] == imgElement.id:
self.idevice.chanceImageFields.remove(imgElement.field)
imgElement.field.idevice.undo = False
imgElement.field.idevice.edit = True
for wordElement in self.wordElements:
wordElement.process(request)
if "action" in request.args and request.args["action"][0] == wordElement.id:
wordIdx = self.wordElements.index(wordElement)
self.idevice.wordTextFields.remove(wordElement.field)
self.idevice.hintTextFields.remove(self.hintElements[wordIdx].field)
wordElement.field.idevice.undo = False
wordElement.field.idevice.edit = True
for hintElement in self.hintElements:
hintElement.process(request)
if content:
self.idevice.content = content
#
# Get an TextArea render back according to mode
def _renderHTMLElement(self, mode, element, containerId = None):
retVal = ""
idStr = ""
if containerId is not None:
idStr = " id='%s' " % containerId
retVal += "<div %s >" % idStr
if mode == "preview":
retVal += element.renderPreview()
else:
retVal += element.renderView()
retVal += "</div>"
return retVal
#
# This will generate the HTML elements and javascript that will be required
# for this to be shown as a Javascript game in the web browser
#
def _renderGame(self, style, mode = "view"):
hangmanGameId = "hangman" + self.id
resPath = ""
if mode == "preview":
resPath = "/scripts/"
html = u"<script src='" + resPath + "hangman.js' type='text/javascript'></script>\n"
html += common.ideviceHeader(self, style, mode)
html += "<div id='hangman%(gameId)smessageStore' style='display: none'>" % {"gameId" : hangmanGameId}
html += self._renderHTMLElement(mode, self.wrongGuessTextElement, "hmwrong" + hangmanGameId)
html += self._renderHTMLElement(mode, self.lostLevelTextElement, "hmlost" + hangmanGameId)
html += self._renderHTMLElement(mode, self.levelPassedTextElement, "hmpassed" + hangmanGameId)
html += self._renderHTMLElement(mode, self.gameWonTextElement, "hmwon" + hangmanGameId)
html += "</div>"
#Go through the images and find out the max height and maxwidth
imgMaxHeight = 0
imgMaxWidth = 0
for imgElement in self.chanceImageElements:
if imgElement.field.imageResource and imgElement.field.imageResource is not None:
if(int(imgElement.field.width) > imgMaxWidth):
imgMaxWidth = int(imgElement.field.width)
if(imgElement.field.height > imgMaxHeight):
imgMaxHeight = int(imgElement.field.height)
#Makes a javascript array of the list of words that the user has given
#This assigned as data-hangman-words
num_words = len(self.wordElements)
word_attr = "["
for wordIndex, word in enumerate(self.wordElements):
word_attr += "["%(word)s", "%(hint)s"]" % {
"word" : word.renderView(),
"hint" : self.hintElements[wordIndex].renderView(),
}
if wordIndex < num_words -1:
word_attr += ","
word_attr += "]"
"""Make main element to hold values for the exercise """
html += """<div class='exehangmanblock' id=\"exe%(id)s\"
data-hangman-id=\"%(id)s\"
data-hangman-words=\"%(words)s\"
data-buttonstyle-before="%(button_style_before)s"
data-buttonstyle-correct="%(button_style_correct)s"
data-buttonstyle-wrong="%(button_style_wrong)s"
data-alphabet="%(alphabet)s">
""" % {
"id" : hangmanGameId, "words" : word_attr,
"button_style_before" :
self.letterButtonStyleElement.renderView(),
"button_style_correct" :
self.rightLetterButtonStyleElement.renderView(),
"button_style_wrong" :
self.wrongLetterButtonStyleElement.renderView(),
"alphabet":
self.alphabetElement.renderView()
}
html += "<div class=\"hangmanimage_series\">"
#render view of these images
for imgElement in self.chanceImageElements:
if imgElement.field.imageResource and imgElement.field.imageResource is not None:
img_str = None
if mode == "view":
img_str = imgElement.renderView()
else:
img_str = imgElement.renderPreview()
#make it stay within what it should do on a phone
img_str = img_str[:4] + " style='max-width: 100%' " + img_str[4:]
html += img_str
html += "</div>"
messageTopMargin = (imgMaxHeight - 30) / 2
gameWidth = max(600, imgMaxWidth)
game_area_dict = { "gameId" : hangmanGameId, "width" : gameWidth, "height": imgMaxHeight, \
"messagetopmargin" : messageTopMargin, 'hintStyle' : self.hintFieldStyleElement.renderView(), \
'wordStyle' : self.wordAreaStyleElement.renderView(), 'resetText' : self.resetButtonTextElement.renderView(), \
'resetStyle' : self.resetButtonStyleElement.renderView() }
game_area_str ="""
<div id="%(gameId)s_gamearea" style='width: %(width)dpx; max-width: 100%%; overflow-x: hidden; margin-bottom: 130px;' class='exehangman_gamearea'>
<div class='exehangman_alertarea' id="%(gameId)s_alertarea"
style='position: absolute; z-index: 10; text-align: center; border: 1px; background-color: white; width: %(width)dpx; margin-top: %(messagetopmargin)dpx; visibility: hidden'>
 
</div>
<div id="%(gameId)s_imgarea" style='height: %(height)dpx; z-index: 1;' class='exehangman_imgarea'>
</div>
<input type='text' id='%(gameId)s_hintarea' style='%(hintStyle)s width: %(width)dpx; max-width: 100%%;' class='exehangman_hintarea'/>
<input type='text' id='%(gameId)s_wordarea' style='%(wordStyle)s width: %(width)dpx; max-width: 100%%' class='exehangman_wordarea'/>
<div id="%(gameId)s_letterarea" class='exehangman_letterarea'>
</div>
<input class='exehangman_resetbutton' type='button' value='%(resetText)s' style='%(resetStyle)s' onclick='restartLevel("%(gameId)s")'/>
</div>
"""
gameAreaHTML = game_area_str % game_area_dict
html += gameAreaHTML
return html
def renderEdit(self, style):
"""
Returns an XHTML string with the form element for editing this block
"""
html = u"<div>\n"
html += common.ideviceShowEditMessage(self)
html += """<div class='edit_inline_hint'>The Hangman activity
creates a game where the learner has to guess the letters in a
word from a hint. Everytime a letter is guessed incorrectly they
lose a life, represented by an image (e.g. a series of pictures
with less and less apples on a tree)
</div>
"""
html += self.titleElement.renderEdit()
#show words to be guessed
html += _("<h2>Words to Guess</h2>")
for wordIndex in range(0, len(self.wordElements)):
html += "<div class='idevice_item_container' style='width: 500px;'>"
word = self.wordElements[wordIndex]
html += "<table width='99%'><tr><td valign='top'>"
html += "<strong>"
html += _("Word %s" % str(wordIndex+1))
html += "</strong>"
html += self.hintElements[wordIndex].renderEdit()
html += word.renderEdit()
html += "</td><td valign='top' style='text-align: right'>"
if wordIndex > 0:
html += common.submitImage(word.id, word.field.idevice.id,
"/images/stock-cancel.png",
_("Remove This Word")) + "<br/>"
html += "</td></tr></table>"
html += "</div>"
html += common.submitButton("addWord"+unicode(self.id),\
_("Add Word"), extra_classes="add_item_button")
#render edit of these images
for img_count in range(0, len(self.chanceImageElements)):
imgElement = self.chanceImageElements[img_count]
html += "<div class='idevice_item_container' style='width: 700px;'>"
html += "<table><tr><td valign='top'>"
html += "<strong>"
html += "Chance %s" % str(img_count+1)
html += "</strong>"
html += imgElement.renderEdit()
html += "</td><td valign='top' style='text-align: right'>"
html += common.submitImage(imgElement.id, imgElement.field.idevice.id,
"/images/stock-cancel.png",
_("Remove This Chance"))
html += "</td></tr></table>"
html += "</div>"
addChanceButtonLabel = _("Add Chance")
html += common.submitButton("addChance"+unicode(self.id), \
addChanceButtonLabel, extra_classes="add_item_button")
html += self.contentElement.renderEdit()
html += self.alphabetElement.renderEdit()
#messages to show the user for different events
html += self.wrongGuessTextElement.renderEdit()
html += self.lostLevelTextElement.renderEdit()
html += self.levelPassedTextElement.renderEdit()
html += self.gameWonTextElement.renderEdit()
html += self.resetButtonTextElement.renderEdit()
divId = "fieldtype_advanced" + self.id
html += "<input name='showbox" + divId + "' type='checkbox' onchange='$(\"#" + divId + "\").toggle()'/>"
html += _("Show Advanced Options") + "<br/>"
html += "<div id='" + divId + "' style='display: none' "
html += ">"
#styles for buttons
html += self.letterButtonStyleElement.renderEdit()
html += self.wrongLetterButtonStyleElement.renderEdit()
html += self.rightLetterButtonStyleElement.renderEdit()
#style of the text fields
html += self.hintFieldStyleElement.renderEdit()
html += self.wordAreaStyleElement.renderEdit()
html += self.resetButtonStyleElement.renderEdit()
html += "</div>"
html += "<br/>"
html += "<br/>"
html += self.renderEditButtons()
html += u"</div>\n"
return html
def renderPreview(self, style):
"""
Returns an XHTML string for previewing this block
"""
html = u"<div class=\"iDevice "
html += u"emphasis"+unicode(self.idevice.emphasis)+"\" "
html += u"ondblclick=\"submitLink('edit',"+self.id+", 0);\">\n"
html += self.contentElement.renderView()
html += self._renderGame(style, mode = "preview")
html += self.renderViewButtons()
html += "</div>\n"
return html
def renderXML(self, style):
xml = u""
mediaConverter = ExportMediaConverter.getInstance()
width = mediaConverter.getProfileWidth()
height = mediaConverter.getProfileHeight()
if mediaConverter is not None:
for imgElement in self.chanceImageElements:
if imgElement.field.imageResource is not None:
mediaConverter.resizeImg(XMLPage.currentOutputDir/imgElement.field.imageResource.storageName, \
width, height, {}, {"resizemethod" : "stretch"})
xml += "<idevice type='hangman' id='%s'>\n" % self.idevice.id
xml += "<chanceimages>\n"
for imgElement in self.chanceImageElements:
if imgElement.field.imageResource is not None:
xml += "<img src='%s'/>\n" % imgElement.field.imageResource.storageName
xml += "</chanceimages>\n"
xml += "<alphabet>%s</alphabet>\n" % self.alphabetElement.renderView()
xml += "<wrongguessmessage><![CDATA[ %s ]]></wrongguessmessage>\n" % self.wrongGuessTextElement.renderView()
xml += "<lostlevelmessage><![CDATA[ %s ]]></lostlevelmessage>\n" % self.lostLevelTextElement.renderView()
xml += "<levelpassedmessage><![CDATA[ %s ]]></levelpassedmessage>\n" % self.levelPassedTextElement.renderView()
xml += "<gamewonmessage><![CDATA[ %s ]]></gamewonmessage>\n" % self.gameWonTextElement.renderView()
xml += "<words>"
for wordIndex in range(0, len(self.wordElements)):
word = self.wordElements[wordIndex]
if word != "":
xml += "<word>\n<hint>%(hint)s</hint>\n<answer>%(answer)s</answer>\n</word>\n" \
% {"answer" : word.renderView() , "hint" : self.hintElements[wordIndex].renderView()}
xml += "</words>\n"
xml += "</idevice>\n"
return xml
def renderView(self, style):
"""
Returns an XHTML string for viewing this block
"""
html = u"<div class=\"iDevice "
html += u"emphasis"+unicode(self.idevice.emphasis)+"\">\n"
html += self.contentElement.renderView()
html += self._renderGame(style, mode = "view")
html += u"</div>\n"
return html
class PlacableObjectElement(Element):
#here field should be placeableobjectfield
def __init__(self, field):
Element.__init__(self, field)
# there is then field.maincontent, field.width, field.height, field.correctx, field.correcty , etc.
self.mainContentElement = TextAreaElement(field.mainContentField)
self.targetXElement = TextElement(field.targetX)
self.targetYElement = TextElement(field.targetY)
self.widthElement = TextElement(field.width)
self.heightElement = TextElement(field.height)
self.toleranceElement = TextElement(field.tolerance)
def process(self, request):
self.mainContentElement.process(request)
self.targetXElement.process(request)
self.targetYElement.process(request)
self.widthElement.process(request)
self.heightElement.process(request)
self.toleranceElement.process(request)
field_engine_check_delete(self, request, self.field.idevice.objectsToPlace)
def renderEdit(self):
html = ""
html += self.mainContentElement.renderEdit()
html += self.targetXElement.renderEdit()
html += self.targetYElement.renderEdit()
html += self.widthElement.renderEdit()
html += self.heightElement.renderEdit()
html += self.toleranceElement.renderEdit()
html += field_engine_make_delete_button(self)
return html
def renderView(self):
html = ""
html += self.mainContentElement.renderView()
html += self.mainContentElement.renderView()
html += self.targetXElement.renderView()
html += self.targetYElement.renderView()
html += self.widthElement.renderView()
html += self.heightElement.renderView()
html += self.toleranceElement.renderView()
return html
def renderPreview(self):
html = ""
html += self.renderView()
return html
def __init__(self, field, showDelFileButton = True):
Element.__init__(self, field)
self.fileDescriptionElement = TextElement(field.fileDescription)
self.showDelFile = showDelFileButton
class ClickInOrderBlockInc(Block):
"""
ClickInOrderBlock renders ClickInOrderIdevice
"""
def __init__(self, parent, idevice):
Block.__init__(self, parent, idevice)
self.mainTextAreaElements = {}
self.mainTextElements = {}
self.clickableAreaElements = []
self.questionOrderChoiceElement = ChoiceElement(
idevice.questionOrderChoiceField)
self.timerChoiceElement = ChoiceElement(idevice.timerChoiceField)
self.titleElement = TextElement(idevice.titleField)
for textAreaFieldName, textAreaFieldVals in idevice.textAreaFieldNames.iteritems(
):
self.mainTextAreaElements[textAreaFieldName] = TextAreaElement(
idevice.textAreaFields[textAreaFieldName])
for textFieldName, textFieldVals in idevice.textFieldNames.iteritems():
self.mainTextElements[textFieldName] = TextElement(
idevice.textFields[textFieldName])
for clickableAreaField in idevice.clickableAreaFields:
newClickableElement = ClickInOrderClickableAreaElement(
clickableAreaField)
self.clickableAreaElements.append(newClickableElement)
def process(self, request):
"""
Process the request arguments from the web server to see if any
apply to this block
"""
self.idevice.message = ""
Block.process(self, request)
self.titleElement.process(request)
self.questionOrderChoiceElement.process(request)
self.timerChoiceElement.process(request)
self.idevice.uploadNeededScripts()
if "addClickableArea" + unicode(self.id) in request.args:
self.idevice.addClickableField()
self.idevice.edit = True
self.idevice.undo = False
for textAreaFieldName, textAreaElement in self.mainTextAreaElements.iteritems(
):
textAreaElement.process(request)
for textFieldName, textElement in self.mainTextElements.iteritems():
textElement.process(request)
for clickableAreaElement in self.clickableAreaElements:
clickableAreaElement.process(request)
#validate integer fields are actually integers
field_engine_check_fields_are_ints(self.mainTextElements, \
["width", "height", "hintWidth", "hintHeight"], thisIdevice=self.idevice)
def renderXML(self, style):
previewMode = False
xml = ""
xml += "<idevice type=\"clickinorder\" id=\"%s\">\n" % self.idevice.id
xml += "<clickinorderoptions "
if self.questionOrderChoiceElement.renderView() == "1":
xml += " randomizequestions=\"randomizequestions\" "
"""
if self.timerChoiceElement.renderView() == "1":
xml += " timermode = \"%(timerMode)s\" " % \
xml += self.mainTextAreaElements['Instructions'].renderView()
html += '<div id="clickableAreaGameCompleteFeedback' + self.id + '" style="position: absolute; z-index: 3">'
html += self.mainTextAreaElements['CompleteFeedback'].renderPreview() if previewMode \
else self.mainTextAreaElements['CompleteFeedback'].renderView()
html += "</div>"
html += '<div id="clickableAreaPositiveFeedback' + self.id +'" style="position: absolute; z-index: 1">'
html += self.mainTextAreaElements['PositiveFeedback'].renderPreview() if previewMode \
else self.mainTextAreaElements['PositiveFeedback'].renderView()
html += "</div>"
html += '<div id="clickableAreaNegativeFeedback' + self.id +'" style="position: absolute; z-index: 2">'
html += self.mainTextAreaElements['NegativeFeedback'].renderPreview() if previewMode \
else self.mainTextAreaElements['NegativeFeedback'].renderView()
html += "</div>"
"""
"""
Renders the code for the game...
"""
def _renderGame(self, style, mode="view"):
previewMode = False
resourcePath = ""
if mode == "preview":
previewMode = True
resourcePath = "resources/"
html = common.ideviceHeader(self, style, mode)
html += \
"""
<script src="%(resourcePath)sjquery-ui-1.10.3.custom.min.js" type="text/javascript"> </script>
<script src="%(resourcePath)sclickinorder.js" type="text/javascript"> </script>
<script type="text/javascript">
var clickInOrderGame%(gameId)s = new ClickInOrder('%(gameId)s');
""" % { 'gameId' : str(self.id), 'resourcePath': resourcePath }
if self.questionOrderChoiceElement.renderView() == "1":
html += "clickInOrderGame%(gameId)s.randomizeQuestions = true;\n" % {
'gameId': str(self.id)
}
if self.timerChoiceElement.renderView() == "1":
html += "clickInOrderGame%(gameId)s.timerMode = %(timerMode)s;\n" % \
{"gameId" : str(self.id), "timerMode" : self.timerChoiceElement.renderView() }
for clickableAreaElement in self.clickableAreaElements:
hideDelayStr = clickableAreaElement.textElements[
'hideDelay'].renderView()
if len(hideDelayStr) < 1:
hideDelayStr = "0"
html += "clickInOrderGame%(gameId)s.addClickableArea(\"%(clickableId)s\", %(hideDelay)s, %(bounds)s);\n" \
% {'gameId' : str(self.id), 'clickableId' : str(clickableAreaElement.id), \
'hideDelay' : int(hideDelayStr),\
'bounds' : "new Array(" + clickableAreaElement.textElements['left'].renderView() + "," \
+ clickableAreaElement.textElements['top'].renderView() + ","
+ clickableAreaElement.textElements['width'].renderView() + ","
+ clickableAreaElement.textElements['height'].renderView() +")"}
html += "</script>\n"
if previewMode == True:
html += self.mainTextAreaElements['Instructions'].renderPreview()
else:
html += self.mainTextAreaElements['Instructions'].renderView()
html += '<div id="clickableAreaGameCompleteFeedback' + self.id + '" style="position: absolute; z-index: 3">'
if previewMode == True:
html += self.mainTextAreaElements[
'CompleteFeedback'].renderPreview()
else:
html += self.mainTextAreaElements['CompleteFeedback'].renderView()
html += "</div>"
html += '<div id="clickableAreaPositiveFeedback' + self.id + '" style="position: absolute; z-index: 1">'
if previewMode == True:
html += self.mainTextAreaElements[
'PositiveFeedback'].renderPreview()
else:
html += self.mainTextAreaElements['PositiveFeedback'].renderView()
html += "</div>"
html += '<div id="clickableAreaNegativeFeedback' + self.id + '" style="position: absolute; z-index: 2">'
if previewMode == True:
html += self.mainTextAreaElements[
'NegativeFeedback'].renderPreview()
else:
html += self.mainTextAreaElements['NegativeFeedback'].renderView()
html += "</div>"
if self.timerChoiceElement.renderView() == "1":
html += '<input id="clickinordertimer' + self.id + '" style="' + \
self.mainTextElements['timerStyle'].renderView() + ' "/>\n'
for clickableAreaElement in self.clickableAreaElements:
posStyleTopLeft = "position: absolute; margin-left: %(left)spx; margin-top: %(top)spx; z-index: 2; " \
% { 'left' : clickableAreaElement.textElements['left'].renderView(), \
'top' : clickableAreaElement.textElements['top'].renderView() }
posStyleWidthHeight = "height: %(height)spx; width: %(width)spx; " % \
{ 'width' : clickableAreaElement.textElements['width'].renderView(), \
'height' : clickableAreaElement.textElements['height'].renderView() }
divDictArgs = { 'gameId' : str(self.id), \
'clickableAreaId' : str(clickableAreaElement.id), \
'posStyle' : posStyleTopLeft, \
'posStyleWH' : posStyleWidthHeight }
html += """<div id="clickableArea_%(gameId)s_%(clickableAreaId)s" style="%(posStyle)s %(posStyleWH)s "
onclick="clickInOrderGame%(gameId)s.checkClick(\'%(clickableAreaId)s\')"> </div>""" \
% divDictArgs
html += '<div id="clickableAreaShowMe_%(gameId)s_%(clickableAreaId)s" style="%(posStyle)s">' \
% divDictArgs
if previewMode == True:
html += clickableAreaElement.textAreaElements[
'ShowMe'].renderPreview()
else:
html += clickableAreaElement.textAreaElements[
'ShowMe'].renderView()
html += '</div>'
#the click to start area
gameSizeArgs = { 'gameId' : str(self.id), \
'width' : self.mainTextElements['width'].renderView() ,\
'height' : self.mainTextElements['height'].renderView()}
html += """<div id=\"clickinordercontainer%(gameId)s\" style=\"width: %(width)spx; height: %(height)spx; overflow: hidden;\"
>""" \
% gameSizeArgs
html += """<div id="clickinorderstartarea%(gameId)s\" onclick="clickInOrderGame%(gameId)s.startGame()"
style=\"width: %(width)spx; height: %(height)spx; position: absolute;\">""" \
% gameSizeArgs
if previewMode == True:
html += self.mainTextAreaElements[
'ClickToStartArea'].renderPreview()
else:
html += self.mainTextAreaElements['ClickToStartArea'].renderView()
html += "</div>"
#the main area
html += """<div id="clickinordermainarea%(gameId)s" onclick="clickInOrderGame%(gameId)s.validateClick"
style=\"width: %(width)spx; height: %(height)spx; position: absolute;\">""" \
% gameSizeArgs
if previewMode == True:
html += self.mainTextAreaElements['MainArea'].renderPreview()
else:
html += self.mainTextAreaElements['MainArea'].renderView()
html += "</div>"
html += "</div>"
#the hints
html += "<div id=\"clickInOrderHints" + self.id + "\" style=\"" \
+ "width: " + self.mainTextElements['hintWidth'].renderView() + "px; " \
+ "height: " + self.mainTextElements['hintHeight'].renderView() + "px; " \
+ self.mainTextElements['hintAreaStyle'].renderView() + "\">\n"
for clickableAreaElement in self.clickableAreaElements:
html += "<div id=\"clickableAreaInstruction_%(gameId)s_%(clickableAreaId)s\" style=\"position: absolute\">" \
% { 'gameId' : str(self.id), 'clickableAreaId' : str(clickableAreaElement.id) }
if previewMode == True:
html += clickableAreaElement.textAreaElements[
'Hint'].renderPreview()
else:
html += clickableAreaElement.textAreaElements[
'Hint'].renderView()
html += "</div>\n"
html += "</div>"
html += '<input id="clickinordercounter' + self.id + '" style="' + \
self.mainTextElements['elementCounterStyle'].renderView() +' " value="1"/>\n'
html += "<script type=\"text/javascript\">clickInOrderGame%(gameId)s.init();</script>\n" % {
'gameId': str(self.id)
}
html += common.ideviceFooter(self, style, mode)
return html
def renderEdit(self, style):
"""
Returns an XHTML string with the form element for editing this block
"""
html = u"<div>\n"
html += common.ideviceShowEditMessage(self)
html += \
_("""
<h2>Click The Elements in Order Game</h2>
<p>
This builds a Javascript game where the player has to click on a certain place on the main area according to the hint.
When they click correctly the positive feedback will come and the game will advance. When they click the wrong
area negative feedback will be shown. When they click on the correct area an item can be revealed there. A delay
can be set to make the item disappear if desired after a delay.
</p>
""")
html += self.titleElement.renderEdit()
for textAreaFieldName, textAreaElement in self.mainTextAreaElements.iteritems(
):
html += textAreaElement.renderEdit()
#for textFieldName, textElement in self.mainTextElements.iteritems():
# html += textElement.renderEdit()
for textFieldName in self.idevice.textFieldsBasic:
html += self.mainTextElements[textFieldName].renderEdit()
divId = "fieldtype_advanced" + self.id
html += "<input name='showbox" + divId + "' type='checkbox' onchange='$(\"#" + divId + "\").toggle()'/>"
html += _("Show advanced options") + "<br/>"
html += "<div id='" + divId + "' style='display: none' "
html += ">"
for textFieldName in self.idevice.textFieldsAdvanced:
html += self.mainTextElements[textFieldName].renderEdit()
html += "</div>"
html += "<br/>"
html += self.questionOrderChoiceElement.renderEdit()
html += self.timerChoiceElement.renderEdit()
html += _("<h2>Clickable Areas</h2>")
for clickableAreaElement in self.clickableAreaElements:
html += clickableAreaElement.renderEdit()
html += "<br/>"
html += common.submitButton("addClickableArea" + unicode(self.id),
_("Add Clickable Area"))
html += "<br/>"
html += self.renderEditButtons()
html += u"</div>\n"
return html
def renderPreview(self, style):
"""
Returns an XHTML string for previewing this block
"""
html = ""
html += self._renderGame(style, "preview")
return html
def renderView(self, style):
"""
Returns an XHTML string for viewing this block
"""
html = ""
html += self._renderGame(style, "view")
return html
