We write our example and exercise code inside <codeblock></codeblock>. The attributes used with it include:
1. <codeblock language="html"
The attribute language is used to specify which programming language is utilized inside the code block. This is a required attribute.
language attribute currently supported values includes "html", "javascript", "css", "ruby", "python", and "reactjs".
2. <codeblock type="exercise" >
The attribute type is used to specify whether it is a lesson or an exercise. This is a required attribute.
3. <codeblock testMode="fixedInput" >
The testMode attribute is used to specify the mode of testing a solution to an exercise. This is a required attribute.
The value of testMode could either be fixedInput or multipleInput.
While fixedInput is used when an exercise has a fixed solution, multipleInputis used when we use test cases.
4. <codeblock matchSolutionCode="true" >
The matchSolutionCode attribute can be used to test solution to an exercise, when we want to match the solution code instead of the output. It is considered to be false when not specified. This only works for javascript exercises as of now.
5. <codeblock showTestCaseOutput="false" >
The showTestCaseOutput attribute determines if in exercises involving test cases, the expected output should be shown to the candidate or not. It is considered to be true when not specified. If explicitly set to false, the expected output will not be shown to the candidate. This only works for multipleInput exercises (exercises involving test cases).
6. <codeblock evaluateAsync="true" >
The showTestCaseOutput attribute determines if you want to evaluate the javascript code written by a student asynchronously or not. It is considered to be false when not specified. If explicitly set to true, the javascript code will be evaluated asynchronously. Code involving promises, async/await, etc. cannot be evaluated in a linear single thread fashion. So we convert the candidate code into non-async code using Abstract Syntax Trees (AST) and then evaluate it. This only works for javascript exercises. Use it in javascript exercises where you feel the candidate code might involve async code.
7. <codeblock showSolution="false" >
The showSolution attribute determines if you want to show the candidate the solution to the exercise or not. It is considered to be true when not specified. If explicitly set to false, the solution button on the editor toolbar will not be shown to the candidate.
8. <codeblock showRunCodeButton="false" >
The showRunCodeButton attribute determines if you want to show the candidate the run code button on the editor toolbar or not. It is considered to be true when not specified. If explicitly set to false, the run code button on the editor toolbar will not be shown to the candidate.
9. <codeblock formatCodeByDefault="false" >
The formatCodeByDefault attribute determines whether you want to apply formatting to the solution code by default. It is considered to be true when not specified. If explicitly set to false, the solution code will not be formatted by default.
10. <codeblock packages="ramda, moment" >
The packages attribute determines what other npm packages should be loaded while running the javascript code written by the student. It is considered to be empty when not specified. If explicitly set to a comma-separated list of npm package names, those packages will be loaded while running the student's code. This only works for javascript editors. Right now, only ramda , axios and tailwindcss is supported. If you come across a use case where you need to load other packages, please reach out to neetoCourse dev team to check if that package can be supported or not.
11. <codeblock images="view-from-a-plane.jpg, view-from-a-chopper.jpg" >
The images attribute what images should be loaded while running the student's code. It is considered to be empty when not specified. If explicitly set to a comma separated list of image names, those images will be loaded while running the student's code. This works for javascript/html/css editors. The images should be present in the images directory of the chapter. Usually, when saving content in neetoCourse, the logic automatically scans if an editor should be preloaded with an image/ a set of images or not. But there can be explicit cases. For example, you may provide a directive to a student with an image without src, and ask them to change the src to one of the other images. For the changed code to load the image correctly in the browser that displays resultant html, the editor needs to know about the images it has to keep ready. In such cases, you can use the images attribute.
12. <codeblock dbName="students1.db" >
The dbName attribute specifies what sqlite db to load for display and to run queries on when it is an SQL editor. It is a required attribute if you set language="sql" on a codeblock. The db should be present in the assets/databases directory in the repository root, and should be mentioned in the assets.yml file in the course root.
13. <codeblock dbName="students1.db" displayDbOnly="true" >
The displayDbOnly attribute specifies if the db should be loaded only for display purposes or not. It is considered to be false when not specified. If explicitly set to true, only the database tables will show up. This means that there will be no editor that shows up and the student will not be able to run queries on the db. This only works for SQL editors.
14. <codeblock dbName="students1.db" focusTableBeforeRun="students" >
The focusTableBeforeRun attribute specifies what table should be shown (focussed on) to the student when the db loads up below the editor. By default, the first table in the list of tables in the db is shown. The other tables can be accessed using tabs. When explicitly specified, the table mentioned in the attribute will be focussed to the student. This only works for SQL editors.
15. <codeblock dbName="students1.db" focusTableAfterRun="students" >
The focusTableAfterRun attribute specifies what table should be shown (focussed on) to the student when a query by the student is run successfully on the db. By default, the query output tab is shown. The other tables can be accessed using tabs. But you can think of a case where you expect the candidate's query to change some state in a table that's not the first in the list of tables. For better UX, we may want to focus on that table if the query is run successfully. When explicitly specified, the table mentioned in the attribute will be focussed to the student post the query run. This only works for SQL editors.
16. <codeblock dbName="students1.db" checkForViews="studentsData" >
The checkForViews attribute specifies which SQL views to check for when the student's query is run. It is considered to be empty when not specified. If explicitly set to a comma separated list of view names, those views will be checked for when the student's query is run. If the student's query does not match the expected output of the view, the student's query is considered to be wrong. This only works for SQL exercise editors.
17. <codeblock language="ruby" cache="false" >
The cache attribute specifies if we want to save the expected output of solution against an exercise saved or not. It is considered to be true when not specified. If explicitly set to false, the expected output of the solution will not be saved against the exercise. It is turned on by default for the sake of speed in evaluation. Expected output against a solution once processed through judge0, is expected to be always the same, so it is saved in the db so that each future evaluation of exercises is faster by avoiding not running solution code through judge0. Exceptions are a few cases where the code involves generating random numbers, deals with date/time or expects the student to print an arbitrary value. In these cases, saving the expected output of code might fail in evaluation, so we can turn off caching of output code by setting this attribute to false in such cases.
18. codeblock language="javascript" foldLines="1-3, 4-9"
The foldLines specifies the ranges of lines that should be folded on default load of the editor. You can specify one or more ranges, separated by comma. Each range should be specified as startLine-endLine. For example, 1-3, 4-9 will fold lines 1 to 3 and 4 to 9. This only works for editors that don't have panels. For editors with panels, you can use the foldLines attribute on the panel tag.
19. <codeblock language="reactjs" showConsole="true">
The showConsole attribute specifies if we want to show the console in the case of Reactjs codeblocks. For example, showConsole="true" will show the console. The console will be hidden by default.
20. <codeblock language="css" defaultCSS="* {margin: 0; padding: 0;}">
The defaultCSS attribute can be used to set a baseline style for the output window. It can be used in codeblocks with languages like css and html. The default CSS styles will be applied to the output window without revealing the code to the end user in the editor panel.
Notes:
defaultCSSvalue can be overridden bycssadded in editor panels.Multiline CSS is not allowed in
defaultCSS
21. <codeblock language="reactjs" monacoEditorProps="{minimap: {enabled: false}, cursorStyle: 'block' }">
React codeblock supports monacoEditorProps which can be used to specify properties to configure the editor. Make sure strings inside the JSON has single quotes ''so that it is parsed properly.