QUML Rendering Design

1 Problem statement:
2 Intent:
3 Approach 1: Inline styles at the creation
4 Approach 2: Adding classes for the tags
5 Approach 3: Adding the classes along with default implementation of them
6 Conclusion:
7 Actions Items:

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.

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

<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

<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

<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 will create styles for each resolution and provide them as CDN or API which can be used by consumption (player) or other adaptors can use it or update them with their own requirement.

Actions Items:

Externalize the styles as CDN or API endpoint - @Srinivasan Pusuluri
Adding styles property to QUML Spec - @Kartheek Palla @Harish Kumar Gangula
Using this new styles property in the player - @Harish Kumar Gangula

@Surendrasingh Sucharia @Navendu Saxena @Sharath Prasad