Design Interactive Instruction Using HTML 5 and Java

Design Interactive Instruction Using HTML 5 and Java. Script Project D for CIMT 640 – Ed. Camp 2015 Haisong Ye 4/20/2015

Queen the Most Powerful Piece in Chess

Learning objectives • The learner can move the queen correctly on the board. • The learner can move the queen to any square(s) to capture a single target in one move. • The learner can move the queen to any square(s) to capture multiple targets in one move.

Target Learner o Ages from 7 to 11 o Interested in playing chess o Concrete operational stage

Prior Knowledge Board Diagonal Square Light square Piece Dark square Rank File

Part I. Instructional Considerations

1 2 Information Process 3 Interaction 4 Scaffold Assessing with Puzzles 5 Immediate Feedback

1 Information Process • • • Information Process Relevance Gaining attention Informing learning goal Recalling prior learning User controlled learning pace

2 Interaction Interactive Chess Board • Manipulates chess rules in real time • Shows/hides the valid paths for different pieces • Provides sound feedback for actions • A support tool for instructional design

3 Assessing with Puzzles • Emphases applying knowledge in puzzle solving • Less instructional text, more problems • The assessment items are distributed into the learning process. • Learners have to solve puzzles to advance. • There are 16 assessment items through this program.

4 Scaffold Hints on movement • Chess beginners have difficulties to mentally find out all the possible moves which a piece can do • Provide hints on movement to help them develop the mental skill of finding potential movement • Scaffold will be removed

5 Immediate Feedback Design • Feedback with sound • Detailed feedback for problems • Random words chosen to avoid boredom

Part II. Technology Implementation

Key challenges • Interactive board • Calculate path according to movement rules • Save and represent board data

The Interactive Board Interaction layer Pieces layer Path layer Base board layer

Movement & Path

Save and represent board data [[null, null, null, null, null], [null, null, null], [null, wb, nul, ll, null, wq, null], [null, null, null], [null, wr, null, null], [null, bn, null, null], [null, null, null]]

Implementation • HTML 5 + CSS – for presenting chess board and instructional information • Java. Script – for chess board and pieces interactions, and instructional process • Java. Script Object Notation, JSON – for exchange chess board data • Development tools: Photoshop, Visual Studio 2013

What’s next • User experience on devices with touch screen • Standard format for chess game (Portable Game Notation, PGN) • Predefined problems vs. random problems • Learner model and personalized learning

Q&A

The End