Design Interactive Instruction Using HTML 5 and Java

  • Slides: 21
Download presentation
Design Interactive Instruction Using HTML 5 and Java. Script Project D for CIMT 640

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

Queen the Most Powerful Piece in Chess

Learning objectives • The learner can move the queen correctly on the board. •

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

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

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

Part I. Instructional Considerations

Part I. Instructional Considerations

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

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

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

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

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

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 •

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

Part II. Technology Implementation

Part II. Technology Implementation

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

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

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

Movement & Path

Movement & Path

Save and represent board data [[null, null, null, null, null], [null, null, null], [null,

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

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

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

Q&A

The End

The End