⚙️How to use web-based answer environment
Introduction
Students engage with CodeChum’s coding environment whenever they answer programming items in the activities you create.
It’s beneficial to guide your students in becoming familiar with how CodeChum’s web-based environment works. The more comfortable they are with navigating and using the platform, the more prepared and confident they’ll be for their upcoming activities.
Web Development Coding Environment Anatomy
CodeChum's web development environment looks like this and has the following parts in it:
Item Description - Found on the leftmost side of the screen. This section displays the item name and the complete instructions for the task.
Code Editor Tab - Located at the center of the screen and set as the default view. This is where students write their code for the given item.
Run Code - Positioned at the bottom left of the code editor. When clicked, it runs the student’s code in the Web Server Modal, allowing them to see how their output is rendered.
Check Code - Found at the bottom right of the code editor. This button submits the student’s code to the system and provides an automated score based on the test cases.
Reset- Also at the bottom right, this button restores the code to its original state as provided by the system.
Save - Another bottom-right button, allowing students to save their current work to the system without submitting it yet.
Item Navigation - Displayed in the top right corner as a card. This lists all activity items and allows seamless navigation between them.
Test Cases - Located on the far right side of the screen. This shows all test cases with sample outputs used for grading. Students receive a point for each correct match.
Bottom Navigation - Found at the bottom of the screen. It provides “Prev” and “Next” buttons for moving between activity items smoothly.
Messenger Support - Located at the bottom left corner. This enables students (or teachers) to reach out to CodeChum’s Customer Support Team for help with any issues on the platform.
Web Server Modal- This is the area where students can view the rendered output of their code from the editor.
Developer Tools - Accessible at the top right corner of the Web Server Modal. This opens tools like the console and elements panel, allowing students to inspect and debug the web page in real time.
Fullscreen - Also at the top right of the Web Server Modal, next to the Developer Tools button. This allows students to view their output in a fullscreen, browser-like interface.
Mobile Responsive Viewer - Found beside the Fullscreen button. This feature lets students preview their output in a mobile device layout for responsive design testing.
Last updated