Testing a cloze theme out (not ready for the big time yet)

dist/themes/cloze/card-01.html

@@ -1,34 +1,54 @@
 <!-- ==========================================
      Cloze theme
 
-   - Card: What's the answer?
-   - Info: Question about the code example
-   - Key:  ★ Required
-           ☆ Optional (recommended)
-           ✎ Optional (Notes)
+   - Card #1: What's the answer?
+   - Info:    Syntax (inline or code block) field:
+              - {{c1::codeContents::hint}}
+                - Will also display: ★ Title
+
+   - Card #2: What does this syntax do?
+   - Info:    Syntax (inline or code block) field:
+              - {{c2::preCodeContents::hint}}
+              - {{c2::preCodeContentsExtra::hint}}
+                - Will also display:
+                  ✔ What does this syntax do?
+
+   - Key:     ★ Required
+              ☆ Optional (recommended)
+              ✎ Optional (Notes)
 =============================================== -->
 
 <div id="front" class="container card-1 pb">
   <h1 class="syntax">
     {{^☆ Syntax}}Syntax{{/☆ Syntax}}
     {{#☆ Syntax}}{{☆ Syntax}}{{/☆ Syntax}}
-    <code>{{☆ Syntax (inline code)}}</code>
+    <code>{{cloze:☆ Syntax (inline code)}}</code>
   </h1>
-  <div class="sample-code mb">{{cloze:☆ Sample (code block)}}</div>
+  <div class="sample-code mb">
+    {{cloze:★ Syntax (code block)}}
+  </div>
+  {{#c1}}
+    <p class="title">{{✔ What does this syntax do?}}</p>
+  {{/c1}}
+  {{#c2}}
+    <p class="title">{{★ Title}}</p>
+  {{/c2}}
 </div>
 
 <!-- ========================================== -->
 
-{{FrontSide}}
 
 <div id="answer" class="container card-1 pt+">
-  <div class="box mb">
-    <!-- <div class="box-code">{{★ Key point (code block or image)}}</div> -->
-    <div class="box-notes">{{★ Key point notes}}</div>
+  <h1 class="syntax">
+    {{^☆ Syntax}}Syntax{{/☆ Syntax}}
+    {{#☆ Syntax}}{{☆ Syntax}}{{/☆ Syntax}}
+    <code>{{cloze:☆ Syntax (inline code)}}</code>
+  </h1>
+  <div class="box-code">
+    {{cloze:★ Syntax (code block)}}
   </div>
-  <div class="reference pb">
-    <div class="footer">
-      {{#✎ Other notes}}{{✎ Other notes}}{{/✎ Other notes}}
-    </div>
+  <div class="box-notes">{{★ Key point notes}}</div>
+  <div class="footer mt pb">
+    {{#✎ Other notes}}{{✎ Other notes}}{{/✎ Other notes}}
   </div>
 </div>

dist/themes/cloze/card-02.html

@@ -8,6 +8,7 @@
    - Key:  ★ Required
            ☆ Optional (recommended)
            ✄ Optional (explicitly hide fields)
+           ♻ Optional (explicitly show reference fields)
            ✎ Optional (Notes)
 =============================================== -->
 
@@ -19,11 +20,13 @@ <h1 class="syntax">
 
     <!-- Explicitly hide inline code -->
     {{^----✄-- Hide on front: Syntax (inline code)}}
-    <code>{{☆ Syntax (inline code)}}</code>
+      <code>{{☆ Syntax (inline code)}}</code>
     {{/----✄-- Hide on front: Syntax (inline code)}}
   </h1>
   {{^----✄-- Hide on front: Sample (code block or image)}}
-  <div class="sample-code mb">{{☆ Sample (code block or image)}}</div>
+    <div class="sample-code mb">
+      {{☆ Sample (code block or image)}}
+    </div>
   {{/----✄-- Hide on front: Sample (code block or image)}}
   <p class="title">{{✔ What does this syntax do?}}</p>
 </div>
@@ -34,21 +37,24 @@ <h1 class="syntax">
 {{FrontSide}}
 
 <div id="answer" class="container card-2 pt+">
-  <div class="box mb">
-    <div class="box-code">{{★ Key point (code block or image)}}</div>
-    <div class="box-notes">{{★ Key point notes}}</div>
-  </div>
-  <div class="reference pb">
-    <div class="h2">Reference:
-      {{#»»♻»» Show as reference: Syntax (inline code)}}
-      <code>{{☆ Syntax (inline code)}}</code>
-      {{/»»♻»» Show as reference: Syntax (inline code)}}
-    </div>
+  <div class="box-code">{{★ Key point (code block or image)}}</div>
+  <div class="box-notes">{{★ Key point notes}}</div>
+  <div class="reference">
+    {{#»»♻»» Show as reference: Syntax (inline code)}}
+      <div class="reference-syntax pt-">
+        <h4 class="mb-">Original syntax:
+          <code>{{☆ Syntax (inline code)}}</code>
+        </h4>
+      </div>
+    {{/»»♻»» Show as reference: Syntax (inline code)}}
     {{#»»♻»» Show as reference: Sample (code block or image)}}
-    <div class="sample-code mb">{{☆ Sample (code block or image)}}</div>
+      <div class="reference-sample-code mb pt-">
+        <h4 class="mb-">Original sample code:</h4>
+        {{☆ Sample (code block or image)}}
+      </div>
     {{/»»♻»» Show as reference: Sample (code block or image)}}
-    <div class="footer">
-      {{#✎ Other notes}}{{✎ Other notes}}{{/✎ Other notes}}
-    </div>
+  </div>
+  <div class="footer mt pb">
+    {{#✎ Other notes}}{{✎ Other notes}}{{/✎ Other notes}}
   </div>
 </div>