Design Interactive Instruction Using HTML5 and JavaScript Project D for CIMT 640 – EdCamp 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 to11 o Interested in playing chess o Concrete operational stage

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

Part I. Instructional Considerations

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

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

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 2Interaction

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. 3 Assessing with Puzzles

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 4Scaffold

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

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,null,null,null,null,null,null,null], [null,null,wb,nul,ll,null,null,wq,null], [null,null,null,null,null,null,null,null], [null,null,null,wr,null,null,null,null], [null,null,bn,null,null,null,null,null], [null,null,null,null,null,null,null,null]]

Implementation HTML 5 + CSS – for presenting chess board and instructional information JavaScript – for chess board and pieces interactions, and instructional process JavaScript 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