1. Design Interactive Instruction Using HTML5 and JavaScript Project D for CIMT 640 – EdCamp 2015 Haisong Ye 4/20/2015

2. Queen the Most Powerful Piece in Chess

3. 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.

4. Target Learner o Ages from 7 to11 o Interested in playing chess o Concrete operational stage

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

6. Part I. Instructional Considerations

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

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

9. 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

10. 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

11. 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

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

13. Part II. Technology Implementation

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

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

16. Movement & Path

17. 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]]

18. 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

19. 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

20. Q&A

21. The End