Add hide-ui and rtl options to binary-cards

csfieldguide/static/interactives/binary-cards/README.md

@@ -15,6 +15,11 @@ The interactive shows the cards with dots from **128** to **1** by default (128,
 - `start=sides` - Where `sides` is a sequence of `W` and `B` characters, to state the sides that should be displayed when the interactive starts. The first letter states whether the first card (on the left) should be white (`W`) or black (`B`), the second letter stands for the second card. Therefore the number of letters should match the number of cards used.
 - `input=value` - Where `value` is `true` or `false` (default is true). Indicates whether or not to display the input box that lets users choose how many cards are displayed.
 - `total=value` - Where `value` is `true` or `false` (default is true). Indicates whether or not to display the total number of dots visible. Setting the value to `false` disables the ability to turn the total on.
+- `hide-ui=value` - Where `value` is `true` or `false` (default is false).
+  Indicates whether to hide UI elements, like the title and flip all cards buttons., Setting to true will only show the cards and the dot total (which can be hidden with the `total` parameter, see above).
+- `rtl=value` - Where `value` is `true` or `false` (default is false).
+  Indicates whether or not to display the cards from right to left.
+  This is only intended for use when the screen size is fixed, as it only works for a small number of cards.
 
 ### Input box drawback
 

csfieldguide/static/interactives/binary-cards/js/binary-cards.js

@@ -20,6 +20,8 @@ $(document).ready(function () {
     binaryCardsSettings.TOTAL_COUNT = urlParameters.getUrlParameter("total") || true;
     var parameterNumberOfCards = Number(urlParameters.getUrlParameter("cards") || urlParameters.getUrlParameter("digits"));
     var startingSides = urlParameters.getUrlParameter("start") || "";
+    const hide_ui = urlParameters.getUrlParameter("hide-ui") || true;
+    const rtl = urlParameters.getUrlParameter("rtl") || false;
 
     // Set data and interactive
     allCardsContainerElement = document.getElementById("interactive-binary-cards-container");
@@ -46,6 +48,14 @@ $(document).ready(function () {
         $("#cards-total").addClass("d-none");
         $("#dot-decimal-count").addClass("d-none");
     }
+    if (rtl == "true") {
+        allCardsContainerElement.style.justifyContent = "flex-end";
+        document.getElementById("dot-decimal-count").style.textAlign = "right";
+    }
+    if (hide_ui == "true") {
+        document.getElementById("interactive-binary-cards-title").style.display = "none";
+        document.getElementById("interactive-options").style.display = "none";
+    }
 
     $("#interactive-binary-cards").on("click", ".binary-card", function() {
         $(this).toggleClass("flipped");

csfieldguide/templates/interactives/binary-cards.html

@@ -8,7 +8,7 @@
     <div class="row">
       <div class="col-12">
         <div id="interactive-binary-cards">
-          <h3 class="text-center mt-2">{% trans "Binary Cards" %}</h3>
+          <h3 id="interactive-binary-cards-title" class="text-center mt-2">{% trans "Binary Cards" %}</h3>
 
           <div id="interactive-binary-cards-container" class="my-2"></div>
           <div id="dot-decimal-count"></div>