quiz

quiz.md

Problem

Rich text in apps like Notion are represented in a JSON-based format for consistency and specificity. A simplified version for a nested list might look something like this:

[
  { "text": "One",   "indent": 0, "type": "ordered" },
  { "text": "Two",   "indent": 0, "type": "ordered" },
  { "text": "Alpha", "indent": 1, "type": "bullet"  },
  { "text": "Beta",  "indent": 1, "type": "bullet"  },
  { "text": "I",     "indent": 2, "type": "ordered" },
  { "text": "II",    "indent": 2, "type": "ordered" },
  { "text": "Three", "indent": 0, "type": "ordered" }
]

Which the front end will render to something like:

1. One
2. Two
  • Alpha
  • Beta
    i. I
    ii. II
3. Three
It is sometimes necessary to convert this JSON representation into HTML for exporting, emails, or pasting into other applications.

Your task is to write a program that handles this conversion. The above output would look like this:

<ol>
  <li>One</li>
  <li>Two
    <ul>
      <li>Alpha</li>
      <li>Beta
        <ol>
          <li>I</li>
          <li>II</li>
        </ol>
      </li>
    </ul>
  </li>
  <li>Three</li>
</ol>

Submission

Your main function should be called deltaToHtml. It should accept an array/list as the input, and returns a string as the output.

Input

You do not need to parse a JSON string. You can assume the input is already an array. In order, each item in the array represents an item in the list. Each item has 3 attributes:

• text: the pure text content to be displayed in the item
• indent: item's indent level. You can assume indent will at most increase by 1 from one item to its next item.
• type: what type of list is the item in, the possible values are:
  • bullet: <ul> type list
  • ordered: <ol> type list

Output

The HTML presentation of the input.

Notes:

In our examples, we included indentations for readability. Your submission does not need to output any white space. According to the HTML spec, a nested ol/ul element needs to be contained in a li element. For example, both of the following examples are incorrect:

<-- Invalid HTML syntax -->
<ol>
  <li>One</li>
  <li>Two</li>
  <ul>
    <li>Alpha</li>
    <li>Beta</li>
  </ul>
  <li>Three</li>
</ol>

<-- Valid HTML syntax, but does NOT represent an expected nested list -->
<ol>
  <li>One</li>
  <li>Two</li>
  <li>
    <ul>
      <li>Alpha</li>
      <li>Beta</li>
    </ul>
  </li>
  <li>Three</li>
</ol>

Additional Info

You can choose any language to implement your program.