Page Comparison

Problem statement:

QUML Spec style should support questions rending with default view and it should also support for extending the default view.

Intent:

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.

Solution 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

<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>

Solution 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

<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>

Solution 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

<style>
.image {
  height: 100%
  width: 100%
}
.image_resized {
  height: 50%
  width: 50%
}
.resize-25 {
  width: 25%
}
<style>
<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>

Conclusion:

We want to go with Solution 3 where we have default styles with classes and players or consumers of this question can override the default styles according to their requirement.