Download presentation
Presentation is loading. Please wait.
Published byNickolas Geoffrey Lewis Modified over 9 years ago
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
Similar presentations
© 2025 SlidePlayer.com. Inc.
All rights reserved.