⚙️How to use web-based answer environment
Introduction
Students interact with CodeChum's coding environment whenever they answer programming items in activities created by their teacher.
As a student, it would do you good if you get familiar with how CodeChum's web-based environment works and how to use it well so you can be ultra ready for your next CodeChum activity!
Web Development Coding Environment Anatomy
CodeChum's web development environment looks like this and has the following parts in it:
Item Description - located on the leftmost side of the screen, which contains the item name and the description of the item.
Code Editor Tab - located at the center and intentionally set as the default tab, where you type your code for the item.
Run Code - one of the buttons located at the bottom left portion of the code editor. When clicked, runs your code in a Web Server. This is very useful for viewing your rendered code from the code editor.
Check Code - one of the buttons located at the bottom right portion of the code editor. When clicked, submits your code to the system and provides you with your score for the item.
Reset- one of the buttons located at the bottom right portion of the code editor. When clicked, it resets to the initial code provided by the system.
Save - one of the buttons located at the bottom right portion of the code editor. When clicked, saves your code to the system.
Item Navigation - one of the cards located at the top right corner of the screen, which shows a list of all the items in the activity, providing you with seamless navigation from one item to another.
Test Cases - one of the tabs located at the rightmost side of the screen, which shows a list of all test cases containing sample outputs that determine your score for the item. If your output matches the test cases, you will receive a point.
Bottom Navigation - located at the bottom of the screen, which allows you to seamlessly navigate from one item to another.
Messenger Support - located at the bottom left corner of the screen, this allows you to communicate with our Customer Support Team for assistance with any concerns you may have regarding our app.
Web Server Modal- this is where you will view your rendered code from the code editor.
Developer Tools - located at the right corner of the web server modal, this lets you access the console, elements, and settings that allows you to view and modify the web page in real-time.
Fullscreen - located at the right corner of the web server modal next to the devtools button, this lets you view your output in a browser-like setting.
Mobile Responsive Viewer - located at the right corner of the web server modal next to the fullscreen button, this lets you view your output in a mobile-like setting.
Tips
To maximize the potential of our web-based environment, here are some tips to up your coding experience:
Read the item description carefully, and look out for sample outputs in the description. Those will be helpful to get a visual grasp of what the item is looking for.
Always check the description in the test cases so you can determine whether your code follows the required syntax. Before submitting, click the Check Code button multiple times. Also, compare the expected output and your actual output to ensure they are the same.
Try maximizing the use of the developer tools in the Web View tab so that you can quickly find and fix any errors in your code.
If you have the extra penny, purchase our Premium Plans to get the most out of CodeChum, especially the unlimited Check Tests clicks.
Last updated
