Fixes part of #40 & #42: Generalisation Highfi Mobile Portrait + Landscape

[rt4914]

Explanation

Fixes part of #40 & #42

The exploration and question player has various common items which will finished as par of Generalisation PRs.
These items are are following:

• Content Item
• Feedback Item
• Submitted Item
• Submitted Item List
• Previous Responses Header
• Text Input Interaction
• Fraction Input Interaction
• Number Input Interaction
• Drag and Drop Interaction
• Multiple Choice Interaction
• Item Selection Interaction
• Continue Button
• Submit Button
• Previous Button (active/ inactive)
• Next Button
• Replay Button
• Return to Topic Button

Definitions

Content Item
First item visible in question/exploration is content item.

Feedback Item
The feedback that learner receives based the submitted answer. This item has similar UI as that of Content Item but gets repeated unlike Content Item.

Submitted Item
Whatever answer learner enters is shown as submitted item irrespective of correct/incorrect answer.

Submitted Item List
This has similar functionality as that of Submitted-Item but this is list which is used mainly when Drag & Drop interaction is shown.

Previous Responses Header
Whenever there are multiple incorrect answers, mainly multiple feedback-item and submitted-item then just to show everything correctly on screen, we collapse the intermediate responses. On click on this, learner can either expand/collapse the items.

Input Interactions
Text, Fraction, Number Input Interactions are part of interactions which uses edit-text under different rules.

Drag and Drop Interaction
This interaction has list of items which can be dragged/reordered or combined to submit a particular response (like ordering of numbers in ascending number)

Multiple Choice Interaction
This interaction consists of few options (normally 3-5) and learner can select any one option only.

Item Selection Interaction
This interaction consists of few options (normally 3-5) and learner can select multiple options.

Continue Button
This button is shown, when there is no answer expected from learner, or either learner has submitted the answer and we are informing them to continue.

Submit Button (active/ inactive)
Button which can be clicked to submit answer, this button is visible for Input Interactions, Drag and Drop Item Selection Interaction

Previous Button
Button to traverse to previous state.

Next Button
Button to traverse to next state, which learner had already visited.

Replay Button
Button to replay the Question Player.

Return to Topic Button
Button shown on the last state of exploration to finish the exploration, save the progress and return to topic.

References:

Mobile Landscape Link: https://xd.adobe.com/view/ee9e607b-dbd6-4372-48dc-b687d32af3da-98af/grid
Mobile Portrait Link: https://xd.adobe.com/view/e8aa4198-3940-47f9-514a-f41cc54457f6-9e9b/grid
Tablet Link: https://xd.adobe.com/view/d405de00-a871-4f0f-73a0-f8acef30349b-a234/grid/ (Click on mobile icon on right side to switch between portrait / landscape mocks)

These images were received on email and play an important role because the mocks have inconsistent layouts and therefore we have to follow these screens.

Exploration - Landscape

Exploration - Portrait

Question - Landscape

Question - Portrait

Other guidelines:

1. Split View: The exploration / question player can work in either regular view (which you see normally), or in split-view which is shown only if it matches four conditions: (a.) drag and drop interaction, (b.) image click input, (c.) screen physical size is atleast 7 inch (diagonally) and (d.) screen density is HDPI+.
2. Clarification on Split View: Do not assume that split view will work only for tablet screens, it can work for any device if it passes all 4 conditions mentioned above. So if there is a mobile device which is big enough can have split view too.
3. Generalised XML Files: Each file can be used for under following conditions: (a.) exploration player, (b.) question player (c.) exploration split-view and (d.) question split-view.
4. XML Example: layout/content-item.xml file which is used in portrait mobile device can be used for any of the 4 view-types: (a.) exploration player, (b.) question player (c.) exploration split-view and (d.) question split-view.
5. hasConversationView: Boolean value used in XML files to know whether it is an exploration player or question player. The name represents whether we want to show the items inside recyclerview in conversation form or not. Exploration player follows conversation view and question player does not follow conversation view.
6. isSplitView: Boolean value used in XML files to know whether the UI follows split view or not.

Summary of guidelines:

So, technically each XML file can be configured under 4 types of conditions:

1. Exploration View -> if (hasConversationView && !isSplitView) (referred to as explorationView in xml files).
2. Question View -> if (!hasConversationView && !isSplitView) (referred to as questionView in xml files).
3. Exploration Split-View -> if (hasConversationView && isSplitView) (referred to as explorationSplitView in xml files).
4. Question Split-View -> if (!hasConversationView && isSplitView) (referred to as questionSplitView in xml files).

So, based on these 4 conditions, the margin/padding of each item can be different and therefore to manage that effecientially, we have introduced StateAssemblerMarginBindingAdapters.kt and StateAssemblerPaddingBindingAdapters.kt

Now everything below this is focused towards this PR:

This PR implements highfi of following items in Exploration / Portrait Mode for mobile devices.

• Fraction Input Interaction
• Numeric Input Interaction
• Text Input Interaction
• Partial Selection Interaction (only margins)

Screenshots

Selection Interaction Margin Screenshots

How to test:

1. Play with exploration / question player for First Test Topic in any XDHPI device for better visual comparison with mocks.
2. Check all these screens in landscape as well as portrait mode , mobile and tablet

Margin/ Padding has been followed from these mocks:

Note: If you see marginBottom for any item, normally we have kept it 0dp so that we can introduce that as marginTop for next item which makes UI much easy to implement and visualise. Though there are some exceptions, for example the landscape mock of question player mentions that the content-item margin-bottom is 40dp. Now all other general items below that have margins top/bottom as 24dp therefore, for content-item I have introduced margin-bottom as 16dp and the rest 24dp will be adjusted as margin-top of next item.

Quick Margin / Padding Check

P -> Portrait
L -> Landscape
E -> Exploration
Q -> Question
T -> Tablet

Convention: marginStart, marginTop, marginEnd, marginBottom
** Input Item**
P E -> 40, 24, 24, 0

P Q -> 32, 24, 32, 0

P T E -> 144, 24, 112, 0

P T Q -> 128, 24, 128, 0

L E -> 80, 24, 48, 0

L Q -> 64, 24, 64, 0

L T E -> 208, 24, 176, 0

L T Q -> 192, 24, 192, 0

Numbers above represent values in dp. You can use this to correctly check the margin/padding from mocks -> to above table -> to code base.

Checklist

• The PR title starts with "Fix #bugnum: ", followed by a short, clear summary of the changes. (If this PR fixes part of an issue, prefix the title with "Fix part of #bugnum: ...".)
• The PR explanation includes the words "Fixes #bugnum: ..." (or "Fixes part of #bugnum" if the PR only partially fixes an issue).
• The PR follows the style guide.
• The PR does not contain any unnecessary auto-generated code from Android Studio.
• The PR is made from a branch that's not called "develop".
• The PR is made from a branch that is up-to-date with "develop".
• The PR's branch is based on "develop" and not on any other branch.
• The PR is assigned to an appropriate reviewer in both the Assignees and the Reviewers sections.

[rt4914]

@anandwana001 I have just added these same margins for SelectionItemInteraction too. The selection item interaction needs to be improvised further mainly its internal item positioning but for now this margin fix has been done in this PR.

[anandwana001]

LGTM, thanks @rt4914