...
As part of Question set creation, each question in a question set should be rendered properly in all the possible screens with different resolutions at consumption and it should be extendable by the other adaptors to represent the same questions in a different form.
...
Approach 1: Inline styles at the creation
Here we will have the inline css add to the HTML tags so the it will render properly in the screen below is the sample HTML but there is no easy way to change the styling by player or other adaptor
| Code Block | ||
|---|---|---|
| ||
<figure class="image" style="width:25%;"> <img src="/assets/public/content/do_11320764935163904015/artifact/2020101299.png" alt="do_11320764935163904015" data-asset-variable="do_11320764935163904015"> </figure> |
...
Approach 2: Adding classes for the tags
In this case, we will add the CSS classes accordingly for each HTML tag and the consumer of this question can implement the classes according to their need question will render based on it
| Code Block | ||
|---|---|---|
| ||
<figure class="image image_resized resize-25"> <img src="/assets/public/content/do_11320764935163904015/artifact/2020101299.png" alt="do_11320764935163904015" data-asset-variable="do_11320764935163904015"> </figure> |
...
Approach 3: Adding the classes along with default implementation of them
In this case, we will add the CSS classes accordingly for each HTML tag and the consumer of this question can implement the classes according to their need question will render based on it and even we have default style added to the question so that it will have a default view
...
Conclusion:
We want to go with Solution Approach 3 where we have default styles with classes and players or consumers of this question can override the default styles according to their requirement.