diff --git a/csfieldguide/static/interactives/binary-cards/README.md b/csfieldguide/static/interactives/binary-cards/README.md index 854161c55e..0ac8ef674f 100644 --- a/csfieldguide/static/interactives/binary-cards/README.md +++ b/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 diff --git a/csfieldguide/static/interactives/binary-cards/js/binary-cards.js b/csfieldguide/static/interactives/binary-cards/js/binary-cards.js index ac622101a2..dce96055da 100644 --- a/csfieldguide/static/interactives/binary-cards/js/binary-cards.js +++ b/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"); diff --git a/csfieldguide/templates/interactives/binary-cards.html b/csfieldguide/templates/interactives/binary-cards.html index 9e59568d70..bf65fadcc7 100644 --- a/csfieldguide/templates/interactives/binary-cards.html +++ b/csfieldguide/templates/interactives/binary-cards.html @@ -8,7 +8,7 @@
-

{% trans "Binary Cards" %}

+

{% trans "Binary Cards" %}