Add support for --assignment-- sections in markdown

CHANGELOG.md

@@ -11,6 +11,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 - Add a visual red flash when "Check Your Code" tests fail (#126)
 - Add dark theme support using prefers-color-scheme (#131)
+- Add support for `# --assignment--` sections in challenge markdown (#88)
 
 ### Fixed
 

zimui/src/components/challenge/ChallengeInstructions.vue

@@ -16,6 +16,13 @@ const render = (str: string): string => {
       <div class="description" v-html="render(main.challenge?.description || '')"></div>
       <hr v-if="main.challenge?.description && main.challenge?.instructions" />
       <div class="instructions" v-html="render(main.challenge?.instructions || '')"></div>
+      <hr
+        v-if="
+          main.challenge?.assignment &&
+          (main.challenge?.description || main.challenge?.instructions)
+        "
+      />
+      <div class="assignment" v-html="render(main.challenge?.assignment || '')"></div>
     </div>
   </div>
 </template>

zimui/src/utils/__tests__/fixtures/assignmentChallenge.md

@@ -0,0 +1,32 @@
+---
+id: 6723d1f0568292cd394d6fb6
+title: Recursion Review
+challengeType: 31
+dashedName: review-recursion
+---
+
+# --description--
+
+- Recursion is a programming concept that allows you to call a function repeatedly until a base-case is reached.
+
+Here is an example of a recursive function that calculates the factorial of a number:
+
+```js
+function findFactorial(n) {
+  if (n === 0) {
+    return 1;
+  }
+  return n * findFactorial(n - 1);
+}
+```
+
+In the above example, the `findFactorial` function is called recursively until `n` reaches `0`. When `n` is `0`, the base case is reached and the function returns `1`. The function then returns the product of `n` and the result of the recursive call to `findFactorial(n - 1)`.
+
+- Recursion allows you to handle something with an unknown depth, such as deeply nested objects/arrays, or a file tree. 
+- A call stack is used to keep track of the function calls in a recursive function. Each time a function is called, it is added to the call stack. When the base case is reached, the function calls are removed from the stack.
+- You should carefully define the base case as calling it indefinitely can cause your code to crash. This is because the recursion keeps piling more and more function calls till the system runs out of memory.
+- Recursions find their uses in solving mathematical problems like factorial and Fibonacci, traversing trees and graphs, generating permutations and combinations and much more.
+
+# --assignment--
+
+Review the Recursion topics and concepts.

zimui/src/utils/__tests__/parseChallenge.test.ts

@@ -37,6 +37,34 @@ describe('Parsing a basic JS challenge', () => {
     expect(solutions.length).toEqual(1)
     expect(typeof solutions[0] === 'string').toBe(true)
   })
+  it('should return empty for assignment that arent present', () => {
+    expect(challenge.assignment).toBeFalsy()
+  })
+})
+
+describe('Parsing a challenge with an assignment section', () => {
+  let markdown = ''
+  let challenge: Challenge
+  beforeAll(async () => {
+    markdown = await readFile(join(__dirname, 'fixtures', 'assignmentChallenge.md'), 'utf-8')
+    challenge = parseChallenge(markdown)
+  })
+  it('should pull the header from markdown', () => {
+    const headers = challenge.header
+    expect(headers['challengeType']).toEqual('31')
+    expect(headers['dashedName']).toEqual('review-recursion')
+  })
+  it('should parse the description', () => {
+    expect(challenge.description.length).toBeGreaterThan(0)
+  })
+  it('should parse the assignment section', () => {
+    const assignment = challenge.assignment
+    expect(assignment).not.toBeNull()
+    expect(assignment).toContain('Review the Recursion topics and concepts.')
+  })
+  it('should return empty for instructions that arent present', () => {
+    expect(challenge.instructions).toBeFalsy()
+  })
 })
 
 describe('Extract key/value for markdown header', () => {

zimui/src/utils/parseChallenge.ts

@@ -82,6 +82,10 @@ export class Challenge {
     return instructionMarkdown
   }
 
+  get assignment(): string | null {
+    return this.getSectionMarkdown('assignment')
+  }
+
   toJSON() {
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     const json: any = this.header