Sketching Interface for Spatial Training Platform


In this project, I implemented a free-hand sketching interface, which is the core of the spatial training exercises, and intergreated this interface into the current web platform for training students’ visuaospatial skills. Besides this project, I also worked on another project during my visit at UIUC.


Ziang Xiao: Back end development, data analysis. Yuqi Yao: Front end development, user experience research and design.


Due to the importance of visuospatial skill in the field of STEM education, researchers and instructors have put a lot of effort into evaluating and training engineering students’ visuospatial skills. However, previous methods often rely on traditional paper-based questions and face-to-face visuospatial training workshops, which are costly and timeconsuming, especially for large classes. We have designed and evaluated an online platform to provide a low-cost, scalable solution to effectively evaluate and train visuospatial skills, as well as increase students’ motivation of continue studying in STEM programs. In addition, the online platform can facilitate the analysis of behavioral and error patterns, which can lead to design of intelligent features that improve learning through the use of adaptive and individualized learning modules. The free-hand sketching tool allows students to make isometric and multi-view drawings, which are the cores of traning visuospatial skills, using their computer mice. The free-hand sketching tool provides a working area with an isometric dot grid or a dot grid to guide drawing. Students can add or delete a line between two dots without any constraints. The tool also keeps track of students’ drawing process step by step. A comprehensive time-stamped log file documenting students’ drawing actions will be generated as well for future error pattern analysis. The log file can easily automate the grading process as well.

Sketching Interface


  • Users can join two dots to make a straight line on two types of grids – isometric and orthographic.
  • Delete an existing line by clicking the two ends of the line
  • Users can draw two types of lines – Solid Line and Dashed Line
  • Clear the drawing panel and start over
  • Upload the current work to the server
  • Download the previous work from the server

I designed and implemented the sketching application independently using Unity. This application is published in webGL and integrated into the existing online spatial training platform. Since the upload/download feature needs development on the server side, I also developed this interface on the server end in Django using techniques of network programming.

Spatial Training Platform Overview

Homepage of the platform

a) Multiple Choices Module


b) Feedback Module

c) Sketching Questions

Our online platform is designed to offer a comprehensive assessment and training of visuospatial skills using a set of well-tested multiple choice and free-hand sketching questions. The online platform has two major functions: An interface for answering multiple choice questions and a free-hand sketching tool for answering drawing problems. The interface for the multiple choice questions (Figure a) allows the student to answer questions by clicking on the correct answers, and the system will time-stamped all user actions and automatically determine if the final answers submitted are correct. The platform will also provide feedback (Figure b) to students on their performance. The free-hand sketching tool (Figure c) allows students to make isometric and multi-view drawings (which are the cores of training visuospatial skills) using their computer mice to answer the sketching questions. This platform has 7 weeks of exercises. Currently, my other two teammates (Ziang and Yuqi) are conducting the one-term-long user study at UIUC. For a complete list of faculty members, previous graduate students and research assistants working on the project, please visit Cascade Lab.

Next Article

Leave a Reply

Your email address will not be published. Required fields are marked *