Container Architecture lab types are in general release. Please contact support@vocareum.com to set up a compatible course.
Creating a VS Code Lab
From the course page select "Edit Assignments" and "New Assignment"
Create a name for the assignment, choose the lab type, and select "Save and continue".
You can also toggle whether to allow student Submissions here.
Your first part is now created. From this view you can select Part 1 to enter the Part settings. You can also navigate to Student View and Configure Workspace.
Selecting the "+" icon will allow you to create more Parts
Configure Workspace and File System
Now that your VS Code lab is created select Configure Workspace to launch the VS Code IDE
File Tree
On the left side of your VS Code IDE is the file tree. Here is a list of all directories that are created by the platform -
/course - This directory is common to the entire course and is available only to the grading script.
/data - Place data here to make it available to the learners. For large data sets, it is a more efficient way to deliver data than make it a part of the image or copy to startercode. Every lab gets access to a readonly copy of the data.
/docs - If there is a README.md, README.html, README.txt or README.pdf file present in this directory it will be showed to the user in a panel on the right side of the learner interface.
/private - Place necessary course content or data that does not need to be seen by the learner.
/scripts - This directory is not visible to the learner. It can hold the scripts and any related files that might be required for executing the script.
/startercode - Initializes the student environment. All the content of this directory is copied to /home/labsuser directory when the learner launches the lab.
/work - This directory can be used to develop and test coursework, starter code, scripts, etc. Can also be used for creating quiz.md before running "Generate Quiz" operation.
Populating learner workarea
Navigate to /voc/statercode. This is where instructors will upload assignment materials to be populated in learners' environments.
To upload a file or folder, right-click on the startercode directory, select Upload, and choose a file.
Once an instructor has compiled their assignment materials in /voc/startercode click "Deploy" to make the work available to learners once the assignment is published.
Custom Workspace
If an instructor wants to initialize custom workspace settings for all learners, add a vocsettings.json file to to the startercode under: /voc/startercode/vocsettings.json and select "Deploy".
Current workspace settings can be viewed by scrolling to the bottom of the VS Code and selecting settings.
Please note: The vocsettings.json file only gets copied for the learner the first time they enter the lab. If any changes to the vocsettings.json file are made learners must first delete their existing settings.json file via rm /voc/work/.local/share/code-server/User/settings.json and then restart their lab to see the changes.
Autograding
Instructions to setup Autograding for VS Code can be found here
Extensions
Our VS Code environment comes with some global extensions preinstalled:
Python language support
Jupyter Notebook support
C/C++ language support
C# language support
HTML/CSS/Javascript language support
MySQL database support
Resources present in the container:
Visual Studio Code v1.80.2
Python v3.10.12
Clang v10.0.0
gcc v9.4.0
Java v11.0.19
node.js v18.17.0
MySQL v8.0.34
Installing Extensions Globally
Visit the Open VSX Registry (https://open-vsx.org/) for extensions compatible with the VS Code Lab.
Download the .vsix file of the extension you want to install from Open VSX Registry and upload it to the work area.
Please note: You must download the x64 Linux version of a a package if an extension if there are multiple options available
Run the following command in the terminal:
vocinstall <path-to-extension>
Wait for success message in terminal then select "Save Image".
The "Save Container Image" modal will allow you to name your new image, replace the current image, and restart the currently running container. When you have your options selected select "Save".
MySQL Database
Our VS Code container features MySQL database allowing connection to an http server for full stack web app development.
In the Part settings of your assignment select Resources and make sure to select "Enable Database" and "MySQL DB".
Accessing the Database
To access the MYSQL client, simply type "mysql" into the command line.
Alternatively, to use VS Code’s MySQL extension start by clicking the Database icon on the left side bar of the VS Code environment.
Click on “Create Connection,” specify a name for the connection, and then save and connect to the server.
