From 5455b608d481a7e43b2205518c083481ed635bda Mon Sep 17 00:00:00 2001
From: Brad Simpson <brad.simpson@kineo.com>
Date: Mon, 29 Jan 2024 10:33:35 -0700
Subject: [PATCH] New: Add _isRound option for images (fixes #174)
---
README.md | 2 ++
example.json | 1 +
less/gmcq.less | 7 +++++++
properties.schema | 9 +++++++++
schema/component.schema.json | 6 ++++++
templates/gmcq.jsx | 2 ++
6 files changed, 27 insertions(+)
diff --git a/README.md b/README.md
index e55db30..a7b8cb1 100644
--- a/README.md
+++ b/README.md
@@ -69,6 +69,8 @@ guide the learner’s interaction with the component.
**\_columns** (number): Defines the number of columns wide the **\_items** are displayed in. If the value of **\_columns** is `2`, each **\_items** will be 50% wide. Similarly, if the value of **\_columns** is `3`, each **\_items** will be 33.3% wide. In mobile view, the width of each **\_items** is 50%.
+**\_isRound** (boolean): If set to `true`, the item images will inherit a 50% border radius. Ideal for use with images that are square that are required to be round. The default is `false`.
+
**\_items** (array): Each *item* represents one choice for the multiple choice question and contains values for **text**, **\_shouldBeSelected**, **feedback**, and **\_graphic**.
>**text** (string): Optional text that is displayed as part of the multiple choice option.
diff --git a/example.json b/example.json
index 9a5f75a..9b56fb1 100644
--- a/example.json
+++ b/example.json
@@ -21,6 +21,7 @@
"_canShowMarking": true,
"_recordInteraction": true,
"_columns": 3,
+ "_isRound": false,
"_items": [
{
"text": "This is option 1.",
diff --git a/less/gmcq.less b/less/gmcq.less
index 4434dc7..5cad793 100644
--- a/less/gmcq.less
+++ b/less/gmcq.less
@@ -65,6 +65,13 @@
display: none;
}
+ // Round image option
+ &.is-round &__image-container {
+ display: block;
+ border-radius: 50%;
+ overflow: hidden;
+ }
+
// GMCQ item icons
// --------------------------------------------------
&__answer-icon.is-radio .icon {
diff --git a/properties.schema b/properties.schema
index e0c4dbf..2878e1d 100644
--- a/properties.schema
+++ b/properties.schema
@@ -267,6 +267,15 @@
"validators": ["number"],
"help": "Set the number of columns. If value is '0', component uses the default layout."
},
+ "_isRound": {
+ "type": "boolean",
+ "required": false,
+ "default": false,
+ "title": "Use circular item images",
+ "inputType": "Checkbox",
+ "validators": [],
+ "help": "If enabled, a 50% border radius will be applied to the item images, making them round."
+ },
"_selectable": {
"type": "number",
"required": true,
diff --git a/schema/component.schema.json b/schema/component.schema.json
index 39b2073..7c13f8d 100644
--- a/schema/component.schema.json
+++ b/schema/component.schema.json
@@ -195,6 +195,12 @@
"description": "Set the number of columns. If value is '0', component uses the default layout",
"default": 0
},
+ "_isRound": {
+ "type": "boolean",
+ "title": "Use circular item images",
+ "description": "If enabled, a 50% border radius will be applied to the item images, making them round.",
+ "default": false
+ },
"_selectable": {
"type": "number",
"title": "Selectable items",
diff --git a/templates/gmcq.jsx b/templates/gmcq.jsx
index ce91319..8aaedd6 100644
--- a/templates/gmcq.jsx
+++ b/templates/gmcq.jsx
@@ -16,6 +16,7 @@ export default function Gmcq(props) {
_shouldShowMarking,
_isRadio,
_columns,
+ _isRound,
displayTitle,
body,
instruction,
@@ -52,6 +53,7 @@ export default function Gmcq(props) {
<div
className={classes([
`gmcq-item item-${index}`,
+ _isRound && 'is-round',
(_shouldShowMarking && _shouldBeSelected) ? 'is-correct' : null,
(_shouldShowMarking && !_shouldBeSelected) ? 'is-incorrect' : null
])}