feat: Revamping and maintaining Flascard XBlock

flashcards/flashcards.py

@@ -1,58 +1,56 @@
 """
-    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
 
 from xblock.core import XBlock
-from xblock.fields import Scope, Dict, String
-from xblock.fragment import Fragment
-
-from lxml import etree
+from xblock.fields import Scope, Dict, String, List
+from web_fragments.fragment import Fragment
+from xblock.utils.resources import ResourceLoader
 
 from jinja2 import Environment, PackageLoader
 
-env = Environment(loader=PackageLoader('flashcards', 'static/html'))
+env = Environment(loader=PackageLoader("flashcards", "static/html"))
 
 
 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
     """
-    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"
-        )
+    loader = ResourceLoader(__name__)
+    title = String(
+        default="",
+        scope=Scope.settings,
+        help="Title of the flashcards block",
+    )
 
+    content = List(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()
-        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')
+        frag.initialize_js("FlashcardsXBlock", context)
         return frag
 
     @classmethod
@@ -74,53 +72,44 @@ 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", context)
         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')
-
-        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
-
-        return {'result':'success'}
+        self.title = data.get("title")
+        self.content = data.get("flashcards")
+        return {"result": "success"}

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 {
@@ -103,4 +109,4 @@
     cursor: default;
     background-image: none;
     border: none;
-}
+}

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-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="">
+  <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 class="btn next-btn"> START </div>

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>
+</div>

flashcards/static/js/src/flashcards.js

@@ -1,36 +1,30 @@
 /* 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, params) {
+  /* Initializing the variables for displaying the current question
+     and total questions.
+  */
+  var currentNumber = -1;
+  var totalNumber = params.flashcards.length;
+  $('.fc-container').hide();
 
-    /* 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());
+  /* Show the answer of the question by cliking on the question */
+  $('.fc-card').click(function () {
+    $('.fc-card').toggleClass('is-flipped');
+  });
 
-    /* Hide all elements for the first iteration */
-    $('.flashcards_block li').hide();
-    $('.next-btn').click(function() {
-
-        /* 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++);
-
-        /* If the student reaches the end say FINISHED and disable going further */
-        if (current_number == total_number+1) {
-            $('.btn').html('FINISHED!');
-            $('.btn').addClass('finished-btn').removeClass('next-btn').off('click');
-        }
-    });
+  $('.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 */
+    if (currentNumber == totalNumber - 1) {
+      $('.next-btn').html('You did it!');
+      $('.next-btn').addClass('finished-btn').removeClass('next-btn').off('click');
+    }
+  });
 }
+