75
Joint Math-Bridge Training Program Michael Dietrich (DFKI) Source Based Content Authoring 10.07.2015 Saarbrücken

Math-Bridge Additional Interactivity

Embed Size (px)

Citation preview

Page 1: Math-Bridge Additional Interactivity

Joint Math-Bridge TrainingProgram

Michael Dietrich (DFKI)Source Based Content Authoring

10.07.2015 Saarbrücken

Page 2: Math-Bridge Additional Interactivity

Get jEdit

• Copy jEdit.zip to HDD

• Unpack

• Start by– java –Xmx512M –jar jedit.jar& (*nix, Mac)– Doubleclick jedit.jar

Page 3: Math-Bridge Additional Interactivity

jEdit Config

• Configure OQMath Plugin

• Set Math-Bridge URL– Plugins – Plugin Options...– OQMath Jedit– Enter URL

• Specify Math-Bridge location– analogue

Page 4: Math-Bridge Additional Interactivity

jEdit Test

• OQMath – Start a collection

• Provide a name

• Let the magic happen

• Restart Math-Bridge

• Visit new collection with browser

Page 5: Math-Bridge Additional Interactivity

TRANSFORMATION PROCESS

o Edit content/enter formula

o Open Ant-Tab

o Select build-file corresponding to collection

o Start transformation by clicking „Running-Man“

o Starts QMath process (www.matracas.org)

Page 6: Math-Bridge Additional Interactivity

Formatting Basics

• Line Breaks– <br/>

• Write text bold:– <highlight type=„important“>text</highlight>

• Write text italic– <highlight type=„noticable“>text</highlight>

Page 7: Math-Bridge Additional Interactivity

Adding a paragraph

• Standard paragraph– <p>some text</p>

• Paragraph with centered text– <p style=„cm“>text to be centered</p>

Page 8: Math-Bridge Additional Interactivity

General purpose formatting

• Element for general formatting:

– <with style=„css instructions“></with>

• Examples– <with style=„text-align:center“> (center)– <with style=„text-align:right“> (text is right aligned)– <with style=„color:red“> (text is written in red)– ...

Page 9: Math-Bridge Additional Interactivity

Problem with tables

• Centering of tables is not working with the previous methods

• Solution: add margin-left:auto and margin-right:auto to the style attribute of table

• Example– <table style=„margin-left:auto;margin-right:auto;“>

<tr><td>table content</td></tr></table>

Page 10: Math-Bridge Additional Interactivity

Hands-on jEdit

• Create up to 10 LOs from example content

Page 11: Math-Bridge Additional Interactivity

Hands-on Translations I

• Translate file schulung/oqmath/trl_exa_1.oqmath

• Transform it to omdoc

• View it in Math-Bridge

Page 12: Math-Bridge Additional Interactivity

Hands-on Translations II

• Translate file schulung/oqmath/trl_exa_2.oqmath

• Transform it to omdoc

• View it in Math-Bridge

Page 13: Math-Bridge Additional Interactivity

Hands-on Translations III

• Translate file schulung/oqmath/trl_exa_3.oqmath

• Transform it to omdoc

• View it in Math-Bridge

Page 14: Math-Bridge Additional Interactivity

Hands-on Translations IV

• Translate file schulung/oqmath/trl_exa_4.oqmath

• Transform it to omdoc

• View it in Math-Bridge

Page 15: Math-Bridge Additional Interactivity

FORMULA INPUT

• Where?– In OQMath Files

• Markup– Surrounded by $-characters

• LaTeX like syntax

+ plus, - minus, * times, / divide, ^ power

Page 16: Math-Bridge Additional Interactivity

EXAMPLE FOR FORMULA INPUT$x^3+y^2=0$ is transformed to

Page 17: Math-Bridge Additional Interactivity

EXAMPLE FOR FORMULA INPUT$x^3+y^2=0$ is transformed to

<OMOBJ> <OMA> <OMS cd="relation1" name="eq" /> <OMA> <OMS cd="arith1" name="plus" /> <OMA> <OMS cd="arith1" name="power" /> <OMV name="x" /> <OMI>3</OMI> </OMA> <OMA> <OMS cd="arith1" name="power" /> <OMV name="y" /> <OMI>2</OMI> </OMA> </OMA> <OMI>0</OMI> </OMA></OMOBJ>

Page 18: Math-Bridge Additional Interactivity

TRANSFORMATION PROCESS

o Edit content/enter formula

o Open Ant-Tab

o Select build-file corresponding to collection

o Start transformation by clicking „Running-Man“

o Starts QMath process (www.matracas.org)

Page 19: Math-Bridge Additional Interactivity

TRANSFORMATION PROCESSo Qmath Process stops

o Reload of Math-Bridge‘s mathematical database is triggered

o Possible errors in content are displayed in Console and ErrorList-Tab

o Build Successful message displayed in Console

Page 20: Math-Bridge Additional Interactivity

FREQUENT MBASE ERRORS

E: Unresolved xref theory_id/lo_idC: Missing importS: Insert import of theory containing not found learning object

E: Unresolved xref in Recbook_xxx.omdocC: Mbase may be corruptS: Check in browser for transformation errors, remove data/slumbd and restart Math-Bridge to fix

E: Duplicate ID in Recbook_automatic.omdocS: Just ignore

Page 21: Math-Bridge Additional Interactivity

TRANSFORMATION PROCESS

o QMath Process stops

o Error message(s) are logged in Console-Tab

o Build Failed message displayed in Console-Tab

Page 22: Math-Bridge Additional Interactivity

FREQUENT QMATH ERRORS

E: Parse error in documentC: Error in formula syntaxS: Correct error

E: ending dollar not-found... ignoring last dollar.S: Add the missing dollar

Page 23: Math-Bridge Additional Interactivity

ATTENTION

Presentation can have errors even though no errors were reported during the transformation process.

Presentation needs to be checked manually

Page 24: Math-Bridge Additional Interactivity

HANDS-ONAdd the following formulas to your collection one after the other

Page 25: Math-Bridge Additional Interactivity

SYMBOLS AVAILABLE IN EACH Math-Bridge

• OpenMath-CDs (Content Dictionaries)• Basic set of symbols to be used for

authoring

(Excerpt of arith1 content dictionary)

Page 26: Math-Bridge Additional Interactivity

BROWSE AVAILABLE SYMBOLS ONLINE

o Symbol Presentation

o Displays all symbols available in Math-Bridge installation

o Separation by collection

Page 27: Math-Bridge Additional Interactivity

BROWSE SYMBOLS AVAILABLE LOCALLY

o Notations List

o Tool of OQMath Plug-in for jEdit

o Displays all usable symbols for oqmath files

o Different lists for different files(maybe)

Page 28: Math-Bridge Additional Interactivity

BROWSE AVAILABLE SYMBOLS LOCALLY

Michael Dietrich - Saarland University

Page 29: Math-Bridge Additional Interactivity

USE MORE SYMBOLS

• Make calculus1 usable in OQMath file (I)– <?QMath Context:„Mathematics/OpenMath/calculus1"?>

• Make calculus1 usable in OQMath file (II)– Add Context:„Mathematics/OpenMath/calculus1“ to

notations.qmath file

• Tell Math-Bridge where to look for calculus1 – <imports from="mbase://openmath-cds/calculus1/"/>

Page 30: Math-Bridge Additional Interactivity

USAGE OF FOUND SYMBOLS• Question:

How to use the symbols to create formulas?

o Depends on the type of the symbolo 5 types

o Applicationo Bindingo Operatoro Symbolo Variable

Page 31: Math-Bridge Additional Interactivity

SYMBOL TYPE: BINDING

o only one symbol with this type

o Symbol: lambda BINDING "fns1:lambda“

o used to bind variables to functions

Usage Example: $lambda(x,x^2)$

Page 32: Math-Bridge Additional Interactivity

SYMBOL TYPE: OPERATORS

o OP prefix denotes this type

o Symbol: oo OP_PLUS “myTherory:myoo“

o PLUS means that this operators has the precedence of +

Usage Example: $1 oo 4$

Page 33: Math-Bridge Additional Interactivity

SYMBOL TYPE: SYMBOL

o standalone symbol with semantics

o Symbol: sym SYMBOL “myTheory:mySymbol“

Usage Example: $sym$

Page 34: Math-Bridge Additional Interactivity

SYMBOL TYPE: VARIABLE

o same as SYMBOL but without semantics

o Symbol: myVar VARIABLE „var “

Usage Example: $myVar$

Page 35: Math-Bridge Additional Interactivity

SYMBOL TYPE: APPLICATION

o most difficult type in terms of syntax

o Symbol: myApp APPLICATION “myTheory:myApp“

o From the above declaration we cannot tell number of parameters

Usage Example: $myApp(x,x^2,...,?)$

Page 36: Math-Bridge Additional Interactivity

SYMBOL TYPE: APPLICATION

Ways to find out the number of parameters:

o Go to definition of symbol and check the qmath prototype

o Check the omdoc definition of the symbol

o For OpenMath-CDs: Visit http://www.openmath.org/cdAnd check the symbol description

Page 37: Math-Bridge Additional Interactivity

HANDS-ON

• 1-2

• 1-2 = -1

• a²+b²=c²

• c= √a²+b²

Page 38: Math-Bridge Additional Interactivity

HANDS-ON

• 1-2 $1-2$

• 1-2 = -1 $1-2=neg(1)$

• a²+b²=c² $a^2=b^2=c^2$

• c= √a²+b² $c=root(a^2+b^2)$

Page 39: Math-Bridge Additional Interactivity

HANDS-ON

• f(x)=x^2

• 1+(2+3)

• 1,2,3,…,n

Page 40: Math-Bridge Additional Interactivity

HANDS-ON

• f(x)=x^2

• 1+(2+3)

• 1,2,3,…,n

$apply(f,x)=x^2$

$1+rBra(2+3)$

$enum(1,2,3,cdots,n)$

Page 41: Math-Bridge Additional Interactivity

HANDS-ON

Page 42: Math-Bridge Additional Interactivity

HANDS-ON

$sum(0 ._. n,lambda(i,i))$

$sum(0 ._. n,lambda(i,sqt(X,i)))$

$limit(inf, both_sides, lambda(x,ln(x)))$

$dint(1._.n,lambda(x,x^3-2))$

Page 43: Math-Bridge Additional Interactivity

FLOAT NOTATION• Problem: Qmath transforms decimals

wrong

• Example: 1.5 -> 1.4999999

• Problem in exercise evaluations

• Solution float

• Usage $float(„1.5“)$

Page 44: Math-Bridge Additional Interactivity

Exercises - Basics

• Set of nodes• Task • Interaction• Feedback

• Transitions between nodes

Page 45: Math-Bridge Additional Interactivity

Exercises - Transitions

• Unconditional (Task/Feedback)• Transition is always used

• Conditional (Interaction)• Used if certain condition(s) hold

• Default(Interaction)• Used if no other condition fired

Page 46: Math-Bridge Additional Interactivity

Exercises - Conditions

• Comparison with user input

• Syntactic Evaluation• User answer and expected answer must be identical

• Semantic Evaluation• User answer must be semantically correct

• Numeric Evaluation• Numeric value of user input is compared with provided answer • Error tolerance can be provided

Page 47: Math-Bridge Additional Interactivity

EXAMAT

Calculate ¾ + ½

Page 48: Math-Bridge Additional Interactivity

jEditOpen exercise

Beweisen Sie den großen Satz von Fermat:

Die Gleichung a^n + b^n = c^nbesitzt für ganzzahlige a,b,c ≠ 0und natürliche Zahlen n>2 keine Lösung.

Page 49: Math-Bridge Additional Interactivity

jEditOpen exercise

<exercise id="schulungEx1" for="schulExampleEx_sym" > <metadata><Title> Offene Übungsaufgabe </Title>

<Format>AMEL1.0</Format> <extradata> <exercisetype value="open"/> </extradata> </metadata> <CMP> Beweisen Sie den großen Satz von Fermat: </CMP>

<interaction id="schulungEx1_step1"><feedback><CMP>Beweisen Sie den großen Satz von Fermat<br/>

Die Gleichung $a^n + b^n = c^n$<br/>besitzt für ganzzahlige $list(a,b,c) neq 0$und natürliche Zahlen $n &gt; 2$ keine Lösung. </CMP></feedback>

</interaction> </exercise>

Page 50: Math-Bridge Additional Interactivity

jEditFill In Blank

Berechnen Sie ¾ + ½

Page 51: Math-Bridge Additional Interactivity

jEditFill In Blank

<exercise id="schulEx2" for="schulExampleEx_sym" >

<metadata><Title> Fill in blank Aufgabe </Title>

</metadata> <CMP> Berechnen Sie $3/4 + 1/2$ </CMP>

Page 52: Math-Bridge Additional Interactivity

jEditFill In Blank

<interaction id="schulEx2_step1"><feedback><CMP>$3/4 + 1/2 =

id("schulEx2_blank1",5/4)$</CMP></feedback>

<interaction_map> <blank for="schulEx2_blank1"/> </interaction_map>

Page 53: Math-Bridge Additional Interactivity

jEditFill In Blank

<answer_map> <condition xref="schulEx2_correct"> <diagnosis> <achievement value="1.0"/> </diagnosis>

<composite> <syn_eq> $5/4$ </syn_eq>

<composite> </condition> <default xref="schulEx2_wrong"> <diagnosis> <achievement value="0.0"/> </diagnosis> </default> </answer_map>

</interaction>

Page 54: Math-Bridge Additional Interactivity

jEditFill In Blank

<interaction id="schulEx2_correct"> <feedback from="schulEx2_step1"

input_decoration="automatic"/> <feedback> <CMP> Richtig. </CMP> </feedback> </interaction>

Page 55: Math-Bridge Additional Interactivity

jEditSingle Choice Exercise (SCQ)

Macht Schokolade dick?

Page 56: Math-Bridge Additional Interactivity

jEditSingle Choice Exercise (SCQ)

<interaction_map> <selection for="schulEx3_selection1"> <choice>Ja</choice> <choice>Nein</choice> </selection> </interaction_map>

Page 57: Math-Bridge Additional Interactivity

jEditSingle Choice Exercise (SCQ)

<condition xref="schulEx3_correct"> <diagnosis> <achievement value="1.0"/> </diagnosis>

<composite> <syn_eq> $1$ </syn_eq> <syn_eq> $0$ </syn_eq>

</composite> </condition>

Page 58: Math-Bridge Additional Interactivity

jEditMultiple Choice Exercise

Welche der folgenden Zahlen sind gerade?

• 1• 2• 3• 4• 5

Page 59: Math-Bridge Additional Interactivity

jEditMultiple Choice Exercise

<interaction_map> <selection for="schulEx4_selection1" multiple="yes"> <choice>$1$</choice> <choice>$2$</choice> <choice>$3$</choice> <choice>$4$</choice> <choice>$5$</choice> </selection> </interaction_map>

Page 60: Math-Bridge Additional Interactivity

jEditMultiple Choice Exercise

<answer_map> <condition xref="schulEx4_correct"> <diagnosis> <achievement value="1.0"/> </diagnosis>

<composite> <syn_eq> $0$ </syn_eq> <syn_eq> $1$ </syn_eq> <syn_eq> $0$ </syn_eq> <syn_eq> $1$ </syn_eq> <syn_eq> $0$ </syn_eq>

</composite> </condition>

Page 61: Math-Bridge Additional Interactivity

jEditDrop Down Exercise

Welche Zahl ist gerade?

• 1• 3• 4• 5

Page 62: Math-Bridge Additional Interactivity

jEditDrop Down Exercise

<interaction_map> <selection for="schulEx5_selection1"

style="menu"> <choice>$1$</choice> <choice>$3$</choice> <choice>$4$</choice> <choice>$5$</choice> </selection> </interaction_map>

Page 63: Math-Bridge Additional Interactivity

jEditDrop Down Exercise

<condition xref="schulEx5_correct"> <diagnosis> <achievement value="1.0"/> </diagnosis>

<composite> <syn_eq> $0$ </syn_eq> <syn_eq> $0$ </syn_eq> <syn_eq> $1$ </syn_eq> <syn_eq> $0$ </syn_eq>

</composite> </condition>

Page 64: Math-Bridge Additional Interactivity

jEditRandomizer (Single Values)

Addieren Sie die beiden Werte

Page 65: Math-Bridge Additional Interactivity

jEditRandomizer (Single Values)

<interaction_generator name="Randomizer"> <parameter name="constant"> $p_a$ $1$ $2$ $3$ </parameter> <parameter name="constant"> $p_b$ $4$ $5$ $6$ </parameter>

<parameter name="evaluated_constant"> $p_c$ $p_a+p_b$ </parameter> </interaction_generator>

Page 66: Math-Bridge Additional Interactivity

jEditRandomizer (Single Values)

<condition xref="schulEx6_correct"> <diagnosis> <achievement value="1.0"/> </diagnosis> <composite> <syn_eq> $p_c$ </syn_eq> </composite> </condition>

Page 67: Math-Bridge Additional Interactivity

jEditRandomizer (Interval)

Addieren Sie die beiden Werte

Page 68: Math-Bridge Additional Interactivity

jEditRandomizer (Interval)

<parameter name="constant"> $p_a$ <interval discrete="yes" left_open="no" right_open="no"> $1$ $6$ </interval> </parameter> <parameter name="constant"> $p_b$ <interval discrete="yes" left_open="no" right_open="no"> $7$ $12$ </interval> </parameter>

Page 69: Math-Bridge Additional Interactivity

jEdit – Insert Picture

First partImage declaration <private id="«id_of_the_private_element»"> <data format="html" href="../MinePics/«filename of the picture

(.png, .jpeg, .gif)»"/> <data format="pdf" href="./omdoc1/mine/pics/«filename of the picture

(.png, .jpeg, .pdf)»"/> </private>

Page 70: Math-Bridge Additional Interactivity

jEdit – Insert Picture

Second partImage Usage <omlet argstr="«id_of_the_private_element»" type="image" action="display"> «the caption»

</omlet>

Page 71: Math-Bridge Additional Interactivity

jEdit – Insert Applet

Applet declaration <private id="«private-id»">

<data href="«class.name.with.package»"><PARAM NAME="«param-name»" VALUE="«param-

value»"/></data>

</private>

Page 72: Math-Bridge Additional Interactivity

jEdit – Insert Applet

Applet Usage

<omlet type="applet" argstr="«private-id»"archive="«../mycolPics/

ajar.jar»"image="«../applet/images/

console-applet.gif»"width="«500»"

height="«300»"></omlet>

Page 73: Math-Bridge Additional Interactivity

jEdit – Applet Example<CMP>

<private id="BernoulliInequalityApplet"> <data href="LeAM.Applets.Bernoulli.Bernoulli_inequality"> <PARAM NAME="Language" VALUE="&#36;language" /> </data> </private> <omlet type="applet"

archive="../LeAM_calculusApplets/LeAM.jar" argstr="BernoulliInequalityApplet"

image="../LeAM_calculusApplets/snapshot/Bernoulli_inequality.png" height="400" width="450" />

</CMP>

Page 74: Math-Bridge Additional Interactivity

jEdit – Insert JavaScript/External HTML

Have JavaScript in external HTML FileCreate new directory (ContentDescr needs to be modified)/Add to existing

directory (ie. pics)

In CMP write

<with style="embedHTMLex" width="900" height="500">../collectionPathMap/index.html</with>

as only input

Page 75: Math-Bridge Additional Interactivity

jEdit – Example

<CMP xml:lang="en"> <with style="embedHTMLex" width="900" height="500">../vCollJS/Pascal_en.html</with> <br /> </CMP>