From fdc1b677311f3d36060fd9032050106647a42e0d Mon Sep 17 00:00:00 2001
From: Farhaan Bukhsh <farhaan@opencraft.com>
Date: Sun, 4 Aug 2024 16:55:56 +0530
Subject: [PATCH 1/5] fix: fixes old XBlock method to use new ones.

Signed-off-by: Farhaan Bukhsh <farhaan@opencraft.com>
---
 flashcards/flashcards.py               | 20 ++++++++++++--------
 flashcards/static/html/flashcards.html |  2 +-
 flashcards/static/js/src/flashcards.js |  3 ++-
 3 files changed, 15 insertions(+), 10 deletions(-)

diff --git a/flashcards/flashcards.py b/flashcards/flashcards.py
index 17bb80b..b203f71 100644
--- a/flashcards/flashcards.py
+++ b/flashcards/flashcards.py
@@ -7,7 +7,9 @@
 
 from xblock.core import XBlock
 from xblock.fields import Scope, Dict, String
-from xblock.fragment import Fragment
+from web_fragments.fragment import Fragment
+from xblock.utils.resources import ResourceLoader
+
 
 from lxml import etree
 
@@ -21,6 +23,7 @@ class FlashcardsXBlock(XBlock):
     The content (the values between the <flashcards> tags) is saved as a
     dictionary and passed as a dictionary to the HTML template
     """
+    loader = ResourceLoader(__name__)
     title = String(
             default=u"Flashcards title",
             scope=Scope.settings,
@@ -47,9 +50,10 @@ def student_view(self, context=None):
             'title': self.title,
         }
 
-        frag = Fragment()
-        template = env.get_template("flashcards.html")
-        frag.add_content(template.render(**context))
+        frag = Fragment(self.loader.render_django_template(
+            "static/html/flashcards.html", context=context
+        ))
+        # frag.add_content()
         frag.add_css(self.resource_string("static/css/flashcards.css"))
         frag.add_javascript(self.resource_string("static/js/src/flashcards.js"))
         frag.initialize_js('FlashcardsXBlock')
@@ -112,15 +116,15 @@ def studio_view(self, context):
     def studio_submit(self, data, suffix=''):
         """Called when submitting the form in Studio."""
         self.title = data.get('title')
-        
+
         flashcards = {}
 
         fclist = data.get('flashcards').items()
-        fclist.reverse() # print out the list in the same order as entered
+        # fclist.reverse() # print out the list in the same order as entered
         for item in fclist:
             front, back = item
-            flashcards[front] = back        
+            flashcards[front] = back
 
         self.content = flashcards
 
-        return {'result':'success'}
\ No newline at end of file
+        return {'result':'success'}
diff --git a/flashcards/static/html/flashcards.html b/flashcards/static/html/flashcards.html
index ba736fb..72e4480 100644
--- a/flashcards/static/html/flashcards.html
+++ b/flashcards/static/html/flashcards.html
@@ -3,7 +3,7 @@
 <div class="fc-title">{{ title }}</div>
 <hr>
 <ul>
-    {% for question, answer in flashcards.items() %}
+    {% for question, answer in flashcards.items %}
     <li>
         <div class="fc-question">
             <p>Question</p>
diff --git a/flashcards/static/js/src/flashcards.js b/flashcards/static/js/src/flashcards.js
index bf67487..b33f9a0 100644
--- a/flashcards/static/js/src/flashcards.js
+++ b/flashcards/static/js/src/flashcards.js
@@ -29,8 +29,9 @@ function FlashcardsXBlock(runtime, element) {
 
         /* If the student reaches the end say FINISHED and disable going further */
         if (current_number == total_number+1) {
-            $('.btn').html('FINISHED!');
+            $('.btn').html('You did it!');
             $('.btn').addClass('finished-btn').removeClass('next-btn').off('click');
         }
     });
 }
+

From 308487f90965cc6924444fb020769bbf320b9a4c Mon Sep 17 00:00:00 2001
From: Farhaan Bukhsh <farhaan@opencraft.com>
Date: Mon, 5 Aug 2024 10:00:38 +0530
Subject: [PATCH 2/5] fix: Fixes the formating issue with JS and Python files

Signed-off-by: Farhaan Bukhsh <farhaan@opencraft.com>
---
 flashcards/flashcards.py                    | 62 ++++++++++-----------
 flashcards/static/js/src/flashcards.js      | 59 ++++++++++----------
 flashcards/static/js/src/flashcards_edit.js | 46 +++++++--------
 3 files changed, 83 insertions(+), 84 deletions(-)

diff --git a/flashcards/flashcards.py b/flashcards/flashcards.py
index b203f71..a3c9e1d 100644
--- a/flashcards/flashcards.py
+++ b/flashcards/flashcards.py
@@ -1,6 +1,6 @@
 """
-    Flashcards XBlock allowes the editor to add a list of quesitions and
-    answers (separated by a semicolon) which are then displayed as flashcards.
+Flashcards XBlock allowes the editor to add a list of quesitions and
+answers (separated by a semicolon) which are then displayed as flashcards.
 """
 
 import pkg_resources
@@ -15,7 +15,7 @@
 
 from jinja2 import Environment, PackageLoader
 
-env = Environment(loader=PackageLoader('flashcards', 'static/html'))
+env = Environment(loader=PackageLoader("flashcards", "static/html"))
 
 
 class FlashcardsXBlock(XBlock):
@@ -23,36 +23,33 @@ class FlashcardsXBlock(XBlock):
     The content (the values between the <flashcards> tags) is saved as a
     dictionary and passed as a dictionary to the HTML template
     """
+
     loader = ResourceLoader(__name__)
     title = String(
-            default=u"Flashcards title",
-            scope=Scope.settings,
-            help=u"Title of the flashcards block"
-        )
-
-    content = Dict(
-            default={},
-            scope=Scope.settings,
-            help=u"List of items"
-        )
+        default="Flashcards title",
+        scope=Scope.settings,
+        help="Title of the flashcards block",
+    )
 
+    content = Dict(default={}, scope=Scope.settings, help="List of items")
 
     def resource_string(self, path):
         """Handy helper for getting resources from our kit."""
         data = pkg_resources.resource_string(__name__, path)
         return data.decode("utf8")
 
-
     def student_view(self, context=None):
         """Create fragment and send the appropriate context."""
         context = {
-            'flashcards': self.content,
-            'title': self.title,
+            "flashcards": self.content,
+            "title": self.title,
         }
 
-        frag = Fragment(self.loader.render_django_template(
-            "static/html/flashcards.html", context=context
-        ))
+        frag = Fragment(
+            self.loader.render_django_template(
+                "static/html/flashcards.html", context=context
+            )
+        )
         # frag.add_content()
         frag.add_css(self.resource_string("static/css/flashcards.css"))
         frag.add_javascript(self.resource_string("static/js/src/flashcards.js"))
@@ -78,48 +75,49 @@ def parse_xml(cls, node, runtime, keys, id_generator):
             flashcards[element.attrib["front"]] = element.attrib["back"]
 
         block.content = flashcards
-        block.title = node.attrib['title']
+        block.title = node.attrib["title"]
         return block
 
-
     @staticmethod
     def workbench_scenarios():
         """A canned scenario for display in the workbench."""
         return [
-            ("FlashcardsXBlock",
-             """<vertical_demo>
+            (
+                "FlashcardsXBlock",
+                """<vertical_demo>
                 <flashcards title="Capital cities">
 <flashcard front="Croatia" back="Zagreb" />
 <flashcard front="France" back="Paris" />
                 </flashcards>
                 </vertical_demo>
-             """),
+             """,
+            ),
         ]
 
     def studio_view(self, context):
         """Create a fragment used to display the edit view in the Studio."""
 
         context = {
-            'flashcards': self.content,
-            'title': self.title,
+            "flashcards": self.content,
+            "title": self.title,
         }
 
         frag = Fragment()
-        template = env.get_template('flashcards_edit.html')
+        template = env.get_template("flashcards_edit.html")
         frag.add_content(template.render(**context))
         frag.add_css(self.resource_string("static/css/flashcards_edit.css"))
         frag.add_javascript(self.resource_string("static/js/src/flashcards_edit.js"))
-        frag.initialize_js('FlashcardsEditXBlock')
+        frag.initialize_js("FlashcardsEditXBlock")
         return frag
 
     @XBlock.json_handler
-    def studio_submit(self, data, suffix=''):
+    def studio_submit(self, data, suffix=""):
         """Called when submitting the form in Studio."""
-        self.title = data.get('title')
+        self.title = data.get("title")
 
         flashcards = {}
 
-        fclist = data.get('flashcards').items()
+        fclist = data.get("flashcards").items()
         # fclist.reverse() # print out the list in the same order as entered
         for item in fclist:
             front, back = item
@@ -127,4 +125,4 @@ def studio_submit(self, data, suffix=''):
 
         self.content = flashcards
 
-        return {'result':'success'}
+        return {"result": "success"}
diff --git a/flashcards/static/js/src/flashcards.js b/flashcards/static/js/src/flashcards.js
index b33f9a0..2c56bfb 100644
--- a/flashcards/static/js/src/flashcards.js
+++ b/flashcards/static/js/src/flashcards.js
@@ -1,37 +1,38 @@
 /* Javascript for FlashcardsXBlock. */
-function FlashcardsXBlock(runtime, element) {
-    /* Show the answer of the question by cliking on the question */
-    $('.fc-question').click(function() {
-        $('.fc-answer').css('visibility', 'visible');
-    });
+function FlashcardsXBlock(runtime, element, init_args) {
+  /* Show the answer of the question by cliking on the question */
+  $('.fc-question').click(function () {
+    $('.fc-answer').css('visibility', 'visible');
+  });
 
-    /* Initializing the variables for displaying the current question
-       and total questions.
-    */
-    var current_number = parseInt($('.current-fc').text())+1;
-    var total_number = parseInt($('.fc-total').text());
+  /* Initializing the variables for displaying the current question
+     and total questions.
+  */
+  var current_number = parseInt($('.current-fc').text()) + 1;
+  var total_number = parseInt($('.fc-total').text());
+  debugger;
 
-    /* Hide all elements for the first iteration */
-    $('.flashcards_block li').hide();
-    $('.next-btn').click(function() {
+  /* Hide all elements for the first iteration */
+  $('.flashcards_block li').hide();
+  $('.next-btn').click(function () {
 
-        /* Hide the answer again */
-        $('.fc-answer').css('visibility', 'hidden');
+    /* Hide the answer again */
+    $('.fc-answer').css('visibility', 'hidden');
 
-        /* Removing the previous question. Have trouble figuring out how to
-           make it work without removing the previous question.
-           TO-DO: Figure this out!
-        */
-        $('.flashcards_block > ul > li:visible:first').remove();
-        $('.flashcards_block > ul > li:hidden:first').show();
-        $('.next-btn').html('NEXT');
-        $('.current-fc').html(current_number++);
+    /* Removing the previous question. Have trouble figuring out how to
+       make it work without removing the previous question.
+       TO-DO: Figure this out!
+    */
+    $('.flashcards_block > ul > li:visible:first').remove();
+    $('.flashcards_block > ul > li:hidden:first').show();
+    $('.next-btn').html('NEXT');
+    $('.current-fc').html(current_number++);
 
-        /* If the student reaches the end say FINISHED and disable going further */
-        if (current_number == total_number+1) {
-            $('.btn').html('You did it!');
-            $('.btn').addClass('finished-btn').removeClass('next-btn').off('click');
-        }
-    });
+    /* If the student reaches the end say FINISHED and disable going further */
+    if (current_number == total_number + 1) {
+      $('.btn').html('You did it!');
+      $('.btn').addClass('finished-btn').removeClass('next-btn').off('click');
+    }
+  });
 }
 
diff --git a/flashcards/static/js/src/flashcards_edit.js b/flashcards/static/js/src/flashcards_edit.js
index f3fae5a..bb76d0d 100644
--- a/flashcards/static/js/src/flashcards_edit.js
+++ b/flashcards/static/js/src/flashcards_edit.js
@@ -1,32 +1,32 @@
-function FlashcardsEditXBlock(runtime, element) {
-    $(element).find('.save-button').bind('click', function() {
-        var handlerUrl = runtime.handlerUrl(element, 'studio_submit');
+function FlashcardsEditXBlock(runtime, element, init_args) {
+  $(element).find('.save-button').bind('click', function () {
+    var handlerUrl = runtime.handlerUrl(element, 'studio_submit');
 
 
-        /* Every flashcard (fc-item) has two input fields, "front" and "back" */
-        var flashcard_list = {};
-        var items = document.getElementsByClassName('fc-item');
+    /* Every flashcard (fc-item) has two input fields, "front" and "back" */
+    var flashcard_list = {};
+    var items = document.getElementsByClassName('fc-item');
 
-        for (var i = 0; i < items.length; i++) {
-        /* Read every flashcard and save input values to a dictionary object */
-            var inputs = items[i].getElementsByTagName('input');
-            flashcard_list[inputs[0].value] = inputs[1].value;
-        }
+    for (var i = 0; i < items.length; i++) {
+      /* Read every flashcard and save input values to a dictionary object */
+      var inputs = items[i].getElementsByTagName('input');
+      flashcard_list[inputs[0].value] = inputs[1].value;
+    }
 
-        var data = {
-            title: $(element).find('input[name=title]').val(),
-            flashcards: flashcard_list
-        };
+    var data = {
+      title: $(element).find('input[name=title]').val(),
+      flashcards: flashcard_list
+    };
 
-        var test = JSON.stringify(data);
+    var test = JSON.stringify(data);
 
-        runtime.notify('save', {state: 'start'});
-        $.post(handlerUrl, JSON.stringify(data)).done(function(response) {
-            runtime.notify('save', {state:'end'});
-        });
+    runtime.notify('save', { state: 'start' });
+    $.post(handlerUrl, JSON.stringify(data)).done(function (response) {
+      runtime.notify('save', { state: 'end' });
     });
+  });
 
-    $(element).find('.cancel-button').bind('click', function() {
-        runtime.notify('cancel', {});
-    });
+  $(element).find('.cancel-button').bind('click', function () {
+    runtime.notify('cancel', {});
+  });
 }

From 19942dc0895dd3d2e11f26c29a6051545931b49b Mon Sep 17 00:00:00 2001
From: Farhaan Bukhsh <farhaan@opencraft.com>
Date: Mon, 5 Aug 2024 13:37:07 +0530
Subject: [PATCH 3/5] feat: Adds feature to populate the studio data

The flashcard content have been modified to support a list of object and
title. It uses the context passed to re-populate the data in studio to
edit or change the value.

Signed-off-by: Farhaan Bukhsh <farhaan@opencraft.com>
---
 flashcards/flashcards.py                    | 25 +++-------
 flashcards/static/html/flashcards_edit.html | 27 +----------
 flashcards/static/js/src/flashcards.js      |  1 -
 flashcards/static/js/src/flashcards_edit.js | 52 +++++++++++++++++----
 4 files changed, 50 insertions(+), 55 deletions(-)

diff --git a/flashcards/flashcards.py b/flashcards/flashcards.py
index a3c9e1d..937a6bf 100644
--- a/flashcards/flashcards.py
+++ b/flashcards/flashcards.py
@@ -6,13 +6,10 @@
 import pkg_resources
 
 from xblock.core import XBlock
-from xblock.fields import Scope, Dict, String
+from xblock.fields import Scope, Dict, String, List
 from web_fragments.fragment import Fragment
 from xblock.utils.resources import ResourceLoader
 
-
-from lxml import etree
-
 from jinja2 import Environment, PackageLoader
 
 env = Environment(loader=PackageLoader("flashcards", "static/html"))
@@ -26,12 +23,12 @@ class FlashcardsXBlock(XBlock):
 
     loader = ResourceLoader(__name__)
     title = String(
-        default="Flashcards title",
+        default="",
         scope=Scope.settings,
         help="Title of the flashcards block",
     )
 
-    content = Dict(default={}, scope=Scope.settings, help="List of items")
+    content = List(default=[], scope=Scope.settings, help="List of items")
 
     def resource_string(self, path):
         """Handy helper for getting resources from our kit."""
@@ -53,7 +50,7 @@ def student_view(self, context=None):
         # frag.add_content()
         frag.add_css(self.resource_string("static/css/flashcards.css"))
         frag.add_javascript(self.resource_string("static/js/src/flashcards.js"))
-        frag.initialize_js('FlashcardsXBlock')
+        frag.initialize_js("FlashcardsXBlock", context)
         return frag
 
     @classmethod
@@ -107,22 +104,12 @@ def studio_view(self, context):
         frag.add_content(template.render(**context))
         frag.add_css(self.resource_string("static/css/flashcards_edit.css"))
         frag.add_javascript(self.resource_string("static/js/src/flashcards_edit.js"))
-        frag.initialize_js("FlashcardsEditXBlock")
+        frag.initialize_js("FlashcardsEditXBlock", context)
         return frag
 
     @XBlock.json_handler
     def studio_submit(self, data, suffix=""):
         """Called when submitting the form in Studio."""
         self.title = data.get("title")
-
-        flashcards = {}
-
-        fclist = data.get("flashcards").items()
-        # fclist.reverse() # print out the list in the same order as entered
-        for item in fclist:
-            front, back = item
-            flashcards[front] = back
-
-        self.content = flashcards
-
+        self.content = data.get("flashcards")
         return {"result": "success"}
diff --git a/flashcards/static/html/flashcards_edit.html b/flashcards/static/html/flashcards_edit.html
index e8f5162..230bd3d 100644
--- a/flashcards/static/html/flashcards_edit.html
+++ b/flashcards/static/html/flashcards_edit.html
@@ -1,36 +1,13 @@
-<script>
-    var addFieldButton = document.getElementById("more_fields");
-    var flashCardList  = document.getElementById('flashcard-list')
-    var fc_number = 1;
-
-    function add_fields() {
-        fc_number++;
-        var fields = '<div class="fc-item">\n\
-        <label class="label setting-label" for="flashcards">Flashcard (' + fc_number + ')</label>\n\
-        <input class="input setting-input" name="front" placeholder="Front" type="text" />\n\
-        <input class="input setting-input" name="back" placeholder="Back" type="text" />\n\
-        </div>';
-        flashCardList.insertAdjacentHTML("beforeend", fields );
-    }
-
-    addFieldButton.addEventListener("click", add_fields);
-</script>
-
 <div class="wrapper-comp-settings is-active editor-with-buttons" id="settings-tab">
   <ul class="list-input settings-list">
     <li class="field comp-setting-entry is-set">
       <div class="wrapper-comp-setting">
         <label class="label setting-label" for="title">Flashcards deck title</label>
-        <input class="input setting-input" name="title" id="title" placeholder="Title" type="text" />
+        <input class="input setting-input" name="title" id="flashcard-title" placeholder="Title" type="text" />
       </div>
     </li>
     <li class="field comp-setting-entry is-set">
       <div class="wrapper-comp-setting" id="flashcard-list">
-        <div class="fc-item">
-          <label class="label setting-label" for="flashcards">Flashcard (1)</label>
-          <input class="input setting-input" name="front" placeholder="Front" type="text" />
-          <input class="input setting-input" name="back" placeholder="Back" type="text" />
-        </div>
       </div>
       <input type="button" id="more_fields" value="Add flashcard" />
     </li>
@@ -45,4 +22,4 @@
       </li>
     </ul>
   </div>
-</div>
\ No newline at end of file
+</div>
diff --git a/flashcards/static/js/src/flashcards.js b/flashcards/static/js/src/flashcards.js
index 2c56bfb..f03457e 100644
--- a/flashcards/static/js/src/flashcards.js
+++ b/flashcards/static/js/src/flashcards.js
@@ -10,7 +10,6 @@ function FlashcardsXBlock(runtime, element, init_args) {
   */
   var current_number = parseInt($('.current-fc').text()) + 1;
   var total_number = parseInt($('.fc-total').text());
-  debugger;
 
   /* Hide all elements for the first iteration */
   $('.flashcards_block li').hide();
diff --git a/flashcards/static/js/src/flashcards_edit.js b/flashcards/static/js/src/flashcards_edit.js
index bb76d0d..616a51c 100644
--- a/flashcards/static/js/src/flashcards_edit.js
+++ b/flashcards/static/js/src/flashcards_edit.js
@@ -1,27 +1,59 @@
-function FlashcardsEditXBlock(runtime, element, init_args) {
-  $(element).find('.save-button').bind('click', function () {
-    var handlerUrl = runtime.handlerUrl(element, 'studio_submit');
+function FlashcardsEditXBlock(runtime, element, params) {
+  var addFieldButton = document.getElementById("more_fields");
+  var flashCardList = document.getElementById('flashcard-list')
+  var flashcardNumber = params.flashcards.length || 1;
+  $('#flashcard-title').val(params.title);
+
+  /* Re-populate filed with the available data */
+  if (params.flashcards.length > 0) {
+    for (var i = 0; i < flashcardNumber; i++) {
+      var front = params.flashcards[i].front;
+      var back = params.flashcards[i].back;
+      var fields = `<div class="fc-item">
+        <label class="label setting-label" for="flashcards">Flashcard (  ${i + 1} )</label>
+        <input class="input setting-input" name="front" placeholder="Front" type="text"  value="${front}"/>
+        <input class="input setting-input" name="back" placeholder="Back" type="text" value="${back}"/>
+        </div>`;
+      flashCardList.insertAdjacentHTML("beforeend", fields);
+    }
+  }
 
+  function add_fields() {
+    var fields = '<div class="fc-item">\n\
+      <label class="label setting-label" for="flashcards">Flashcard (' + flashcardNumber + ')</label>\n\
+      <input class="input setting-input" name="front" placeholder="Front" type="text" />\n\
+      <input class="input setting-input" name="back" placeholder="Back" type="text" />\n\
+      </div>';
+    flashCardList.insertAdjacentHTML("beforeend", fields);
+    flashcardNumber++;
+  }
 
+  addFieldButton.addEventListener("click", add_fields);
+
+  $(element).find('.save-button').bind('click', function () {
+    var saveFlashCardsEndpoint = runtime.handlerUrl(element, 'studio_submit');
     /* Every flashcard (fc-item) has two input fields, "front" and "back" */
-    var flashcard_list = {};
+    var flashcardArray = [];
     var items = document.getElementsByClassName('fc-item');
 
     for (var i = 0; i < items.length; i++) {
       /* Read every flashcard and save input values to a dictionary object */
+      var flashCardObject = {}
       var inputs = items[i].getElementsByTagName('input');
-      flashcard_list[inputs[0].value] = inputs[1].value;
+      flashCardObject = {
+        "front": inputs[0].value,
+        "back": inputs[1].value
+      }
+      flashcardArray.push(flashCardObject);
     }
 
     var data = {
-      title: $(element).find('input[name=title]').val(),
-      flashcards: flashcard_list
+      title: $('#flashcard-title').val(),
+      flashcards: flashcardArray
     };
 
-    var test = JSON.stringify(data);
-
     runtime.notify('save', { state: 'start' });
-    $.post(handlerUrl, JSON.stringify(data)).done(function (response) {
+    $.post(saveFlashCardsEndpoint, JSON.stringify(data)).done(function (response) {
       runtime.notify('save', { state: 'end' });
     });
   });

From 956ea7bcbdfeef02118ae33c8edd01a7c6b78320 Mon Sep 17 00:00:00 2001
From: Farhaan Bukhsh <farhaan@opencraft.com>
Date: Mon, 5 Aug 2024 16:28:56 +0530
Subject: [PATCH 4/5] feat: Add the ability to use the data from XBlock

Reduces relying on the HTML for data and queries from the XBlock. This
way we can do the manipulation easily and instead of split view, we have
unified view of the card.

Signed-off-by: Farhaan Bukhsh <farhaan@opencraft.com>
---
 flashcards/static/css/flashcards.css   |  6 ++--
 flashcards/static/html/flashcards.html | 23 +++++----------
 flashcards/static/js/src/flashcards.js | 41 ++++++++++----------------
 3 files changed, 25 insertions(+), 45 deletions(-)

diff --git a/flashcards/static/css/flashcards.css b/flashcards/static/css/flashcards.css
index fcab905..a87ec4e 100644
--- a/flashcards/static/css/flashcards.css
+++ b/flashcards/static/css/flashcards.css
@@ -38,7 +38,7 @@
     list-style: none;
 }
 
-.fc-question {
+#fc-question {
     display:inline-block;
     width:40%;
     padding:5% 3%;
@@ -50,7 +50,7 @@
     margin-right:2%;
 }
 
-.fc-question:hover {
+#fc-question:hover {
     cursor: pointer;
 }
 
@@ -103,4 +103,4 @@
     cursor: default;
     background-image: none;
     border: none;
-}
\ No newline at end of file
+}
diff --git a/flashcards/static/html/flashcards.html b/flashcards/static/html/flashcards.html
index 72e4480..4b5d50e 100644
--- a/flashcards/static/html/flashcards.html
+++ b/flashcards/static/html/flashcards.html
@@ -1,21 +1,12 @@
 <div class="flashcards_block">
-<div class="fc-number"><span class="current-fc">0</span> / <span class="fc-total">{{ flashcards|length }}</span></div>
+<div class="fc-number"><span id="current-fc">0</span> / <span class="fc-total">{{ flashcards|length }}</span></div>
 <div class="fc-title">{{ title }}</div>
 <hr>
-<ul>
-    {% for question, answer in flashcards.items %}
-    <li>
-        <div class="fc-question">
-            <p>Question</p>
-            {{ question }}
-        </div>
-        <div class="fc-answer">
-            <p>Answer</p>
-            {{ answer }}
-        </div>
-    </li>
-    {% endfor %}
-
-</ul>
+<div class="container">
+    <div class="card">
+        <div id="fc-question"></div>
+        <div id="fc-answer"></div>
+    </div>
+</div>
 </div>
 <div class="btn next-btn"> START </div>
diff --git a/flashcards/static/js/src/flashcards.js b/flashcards/static/js/src/flashcards.js
index f03457e..74c19b0 100644
--- a/flashcards/static/js/src/flashcards.js
+++ b/flashcards/static/js/src/flashcards.js
@@ -1,36 +1,25 @@
 /* Javascript for FlashcardsXBlock. */
-function FlashcardsXBlock(runtime, element, init_args) {
-  /* Show the answer of the question by cliking on the question */
-  $('.fc-question').click(function () {
-    $('.fc-answer').css('visibility', 'visible');
-  });
-
+function FlashcardsXBlock(runtime, element, params) {
   /* Initializing the variables for displaying the current question
      and total questions.
   */
-  var current_number = parseInt($('.current-fc').text()) + 1;
-  var total_number = parseInt($('.fc-total').text());
-
-  /* Hide all elements for the first iteration */
-  $('.flashcards_block li').hide();
-  $('.next-btn').click(function () {
+  var currentNumber = -1;
+  var totalNumber = params.flashcards.length;
 
-    /* Hide the answer again */
-    $('.fc-answer').css('visibility', 'hidden');
-
-    /* Removing the previous question. Have trouble figuring out how to
-       make it work without removing the previous question.
-       TO-DO: Figure this out!
-    */
-    $('.flashcards_block > ul > li:visible:first').remove();
-    $('.flashcards_block > ul > li:hidden:first').show();
-    $('.next-btn').html('NEXT');
-    $('.current-fc').html(current_number++);
+  /* Show the answer of the question by cliking on the question */
+  $('#fc-question').click(function () {
+    $('#fc-question').html(`${params.flashcards[currentNumber]["back"]}`)
+  });
 
+  $('.next-btn').click(function () {
+    currentNumber++;
+    $('#fc-question').html(`${params.flashcards[currentNumber]["front"]}`);
+    $('#current-fc').html(`${currentNumber + 1}`);
+    $('.next-btn').html('Nextt');
     /* If the student reaches the end say FINISHED and disable going further */
-    if (current_number == total_number + 1) {
-      $('.btn').html('You did it!');
-      $('.btn').addClass('finished-btn').removeClass('next-btn').off('click');
+    if (currentNumber == totalNumber - 1) {
+      $('.next-btn').html('You did it!');
+      $('.next-btn').addClass('finished-btn').removeClass('next-btn').off('click');
     }
   });
 }

From 85a1b81ba845278f017a56847a7d24641fcbd447 Mon Sep 17 00:00:00 2001
From: Farhaan Bukhsh <farhaan@opencraft.com>
Date: Tue, 6 Aug 2024 00:32:37 +0530
Subject: [PATCH 5/5] feat: Adds the ability to flip the card

Signed-off-by: Farhaan Bukhsh <farhaan@opencraft.com>
---
 flashcards/static/css/flashcards.css   | 72 ++++++++++++++------------
 flashcards/static/html/flashcards.html | 18 +++----
 flashcards/static/js/src/flashcards.js |  8 ++-
 3 files changed, 54 insertions(+), 44 deletions(-)

diff --git a/flashcards/static/css/flashcards.css b/flashcards/static/css/flashcards.css
index a87ec4e..887fdd1 100644
--- a/flashcards/static/css/flashcards.css
+++ b/flashcards/static/css/flashcards.css
@@ -1,10 +1,4 @@
 /* CSS for FlashcardsXBlock */
-.flashcards_block {
-    width:100%;
-    display:inline-block;
-    text-align:center;
-}
-
 .fc-title {
     display:block;
     width:100%;
@@ -30,41 +24,53 @@
     text-align:center;
 }
 
-.flashcards_block ul {
-    padding:0;
+.fc-number {
+  text-align: center;
 }
 
-.flashcards_block li {
-    list-style: none;
+.fc-container {
+  perspective: 900px;
+  width: 60%;
+  height: 653px;
+  display:inline-block;
+  text-align:center;
 }
 
-#fc-question {
-    display:inline-block;
-    width:40%;
-    padding:5% 3%;
-    text-align:center;
-    font-weight:600;
-    font-size:2em;
-    border:1px solid #000;
-    border-radius:20px;
-    margin-right:2%;
+.fc-card {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  cursor: pointer;
+  transform-style: preserve-3d;
+  transform-origin: center right;
+  transition: transform 1s;
+  border: 1px solid rgba(236, 236, 236, 1);
+  box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.1);
+  margin-left: 35%;
 }
 
-#fc-question:hover {
-    cursor: pointer;
+.fc-card-face {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  line-height: 260px;
+  color: black;
+  text-align: center;
+  font-weight: bold;
+  font-size: 40px;
+  backface-visibility: hidden;
 }
 
-.fc-answer {
-    visibility: hidden;
-    display:inline-block;
-    width:40%;
-    padding:5% 3%;
-    text-align:center;
-    font-weight:600;
-    font-size:2em;
-    border:1px solid #000;
-    border-radius:20px;
-    margin-left:2%;
+.fc-card-face-back {
+    transform: rotateY(180deg);
+}
+
+.fc-card.is-flipped {
+  transform: translateX(-100%) rotateY(-180deg);
+}
+
+#fc-question:hover {
+    cursor: pointer;
 }
 
 .next-btn {
diff --git a/flashcards/static/html/flashcards.html b/flashcards/static/html/flashcards.html
index 4b5d50e..33a684e 100644
--- a/flashcards/static/html/flashcards.html
+++ b/flashcards/static/html/flashcards.html
@@ -1,12 +1,12 @@
-<div class="flashcards_block">
-<div class="fc-number"><span id="current-fc">0</span> / <span class="fc-total">{{ flashcards|length }}</span></div>
-<div class="fc-title">{{ title }}</div>
-<hr>
-<div class="container">
-    <div class="card">
-        <div id="fc-question"></div>
-        <div id="fc-answer"></div>
+<div class="">
+  <div class="fc-number"><span id="current-fc">0</span> / <span class="fc-total">{{ flashcards|length }}</span></div>
+  <div class="fc-title">{{ title }}</div>
+  <hr>
+  <div class="fc-container">
+    <div class="fc-card">
+        <div class="fc-card-face" id="fc-question"></div>
+        <div class="fc-card-face fc-card-face-back" id="fc-answer"></div>
     </div>
-</div>
+  </div>
 </div>
 <div class="btn next-btn"> START </div>
diff --git a/flashcards/static/js/src/flashcards.js b/flashcards/static/js/src/flashcards.js
index 74c19b0..c5c68ce 100644
--- a/flashcards/static/js/src/flashcards.js
+++ b/flashcards/static/js/src/flashcards.js
@@ -5,15 +5,19 @@ function FlashcardsXBlock(runtime, element, params) {
   */
   var currentNumber = -1;
   var totalNumber = params.flashcards.length;
+  $('.fc-container').hide();
 
   /* Show the answer of the question by cliking on the question */
-  $('#fc-question').click(function () {
-    $('#fc-question').html(`${params.flashcards[currentNumber]["back"]}`)
+  $('.fc-card').click(function () {
+    $('.fc-card').toggleClass('is-flipped');
   });
 
   $('.next-btn').click(function () {
     currentNumber++;
+    $('.fc-card').removeClass('is-flipped');
+    $('.fc-container').show();
     $('#fc-question').html(`${params.flashcards[currentNumber]["front"]}`);
+    $('#fc-answer').html(`${params.flashcards[currentNumber]["back"]}`)
     $('#current-fc').html(`${currentNumber + 1}`);
     $('.next-btn').html('Nextt');
     /* If the student reaches the end say FINISHED and disable going further */