Upload
nickolas-geoffrey-lewis
View
217
Download
2
Embed Size (px)
Citation preview
Design Interactive Instruction Using HTML5
and JavaScript
Project D for CIMT 640 – EdCamp 2015Haisong Ye4/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 to11o 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
3Assessing with
Puzzles
5Immediate
Feedback
4Scaffold
1Information Process
Information Process
• Relevance• Gaining attention• Informing learning goal• Recalling prior learning• User controlled learning
pace
1Information
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
2Interacti
on
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.
3Assessing 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
5Immediate
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,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