Maxima SCORM 1 2, 1 Muhammad Wannous 1 3, 4 2, 4 Maxima Web LMS MathML HTML5 Flot jquery JSONP JavaScript SCORM SCORM Algebraic Manipulations and Visualizing Graphs in SCORM contents by Maxima and Mashup Approach Jia Yunpeng, 1 Takayuki Nagai, 2, 1 Muhammad Wannous, 1 Toshihiro Kita 3, 4 and Hiroshi Nakano 2, 4 Algebraic manipulations, mathematical formulas and graphs can be visualized in web pages loaded from any sites as learning management systems by developing a web application server that provide Maxima s functions in crossdomain communication, where the Maxima is a free open-source computer algebra program. The client web browser does not require any plug-ins, because the system is implemented by the combination of MathML, Flot (plotting library using HTML5) and JSONP communication (by jquery). We tried to apply the system for an e-learning standard SCORM, and sought possibilities for quizzes etc. by building sample contents. 1. LMS (Learning Management System) Web Web TEX ( ) Web Web 1) 2) JavaScript 8),9) Maxima 3), JSONP 4), Ajax (jquery), MathML 5), FLOT 6) (HTML5 Canvas 7) ) Web Web SCORM 10) SCORM LMS SCORM 1 Graduate School of Science and Technology, Kumamoto University 2 Center for Multimedia and Information Technologies 3 Institute for e-learning Development, Kumamoto University 4 Graduate School of Instructional Systems, Kumamoto University 1 c 2011 Information Processing Society of Japan
1 9) Fig. 1 The system structure 9). Fig. 2 2 An example shown in web browser. 2. 2.1 1 Maxima 3) Web Web JavaScript Web Web Web PC JSONP 4) jquery (Ajax) jsonic.jar library 11) Java 2.2 Maxima Maxima MathML 2 c 2011 Information Processing Society of Japan
var url = "http://.server s URI"; maximaml("#eq0", " diff(sin(theta)/theta,theta)"); maximaml("#eq1", "diff(sin(theta)/theta,theta)"); maximaplot2d("#eq2","diff(sin(theta)/theta,theta)","[theta,-20,20]"); 3 2 JavaScript ( ) Fig. 3 JavaScript source code (part) from Fig.2. <h5>mathematical formulas and algebraic manipulations</h5> <span id="eq1i"/> = <span id="eq0o"/> = <span id="eq1o"/> <h5>plotting graphs</h5> <div id="eq2p" style="width:400px;height:200px" /> 4 2 HTML ( ) Fig. 4 HTML source code (part) from Fig.2. 2 3 JavaScript maximaml(html ID, Maxima ); API Maxima ( ) MathML jquery (Ajax) Web ID 2.3 Maxima Maxima MathML API JavaScript MathML XML 5) Firefox Chrome Safari Internet Explorer ( ) 2 3 JavaScript maximaml("#eq0", " diff(sin(theta)/theta,theta)"); maximaml("#eq1", "diff(sin(theta)/theta,theta)"); 4 <span id="eq0o"/> <span id="eq1o"/> MathML MathML Maxima mathml.lisp 12) 2 θ Maxima JavaScript 2.4 Maxima 2 API JavaScript Maxima Flot 6) Flot HTML5 Canvas 7) Flash JavaApplet 2 3 JavaScript maximaplot2d("#eq2", "diff(sin(theta)/theta,theta)", "[theta,-20,20]"); 4 <div id="eq2p" style="width:400px;height:200px"/> HTML FORM API 9) Web ID 2.5 SCORM 1 Web PC SCORM 10) SCORM SCORM LMS LMS Moodle Sakai CLE Blackboard WebCT LMS SCORM SCORM LMS LMS LMS LMS LMS LMS JSONP LMS SCORM 3 c 2011 Information Processing Society of Japan
(a) 5 SCORM Fig. 5 Structure of the Sample SCORM content. LMS SCORM SCORM 3. SCORM 3.1 SCORM SCORM SCORM 5 SCORM SCORM HTML JavaScript 5 css JavaScript Manifest 2 Web (b) 6 SCORM : ( ) Fig. 6 Sample SCORM content: selection type quiz including mathematical formulas with randomness. 3.2 SCORM 6 4 c 2011 Information Processing Society of Japan
for(i = 0; i < arraysize; i++) { maximaml("#eq"+(i+1), "ev(limit(nusum(3*(1/"+rand[i]+")^n,n,0,m),m,inf),simp:true)"); } 7 6 JavaScript ( ) Fig. 7 JavaScript source code (part) from Fig.6. JavaScript 7 i rand[i] API 6 (a) (b) 4 SCORM API JavaScript 3.3 SCORM 8 9 i rand[i][j] API 8 (a) (b) (a) 4. Maxima Web LMS Fig. 8 (b) 8 SCORM : ( ) Sample SCORM content: selection type quiz including graph plot with randomness. 5 c 2011 Information Processing Society of Japan
for (i = 0; i < arraysize; i++) { maximaplot2d("#eq" + (i + 1), "(x-" + rand[i][0] + ")^" + rand[i][1], "[x,0,5]", null, {xaxis:{min:0, max:5},yaxis:{min:-5, max:5}}); } 9 8 JavaScript ( ) Fig. 9 JavaScript source code (part) from Fig.8. SCORM SCORM Web SCORM SCORM API JavaScript SCORM 8) Muhammad Wannous Maxima 35 pp.381 382 (2010). 9) Nakano, H., Nagai, T., Jia Y., Wannous, M. and Kita, T.: Mashup approach for embedding algebraic manipulations, formulas and graphs in web pages, Global Engineering Education Conference (EDUCON), 4-6 April 2011, Amman, pp.691 694 (2011). 10) http://legacy.adlnet.gov/technologies/scorm/default.aspx 11) jsonic.jar - simple json encoder/decoder for java, http://jsonic.sourceforge.jp/ 12) mathml.lisp - MathML Conversion in Maxima http://www.lurklurk.org/maxima.html 1) webmathematica http://www.wolfram.com/products/webmathematica/, MapleNet http://www.maplesoft.com/products/maplenet/, Sage http://www.sagemath.org/, MaximaPHP http://maximaphp.sourceforge.net/ 2) DragMath http://www.dragmath.bham.ac.uk/, MathEdit http://wme.lzu.edu.cn/mathedit/ 3) : http://maxima.sourceforge.net/ 4) jquery JavaScript,, (2009/11) p.349. 5) : W3C Math Home, http://www.w3.org/math/ 6) http://code.google.com/p/flot/ 7) HTML5 Canvas http://www.w3.org/tr/html5/the-canvas-element.html#the-canvas-element 6 c 2011 Information Processing Society of Japan