Fix #4197: Introduce new hints banner in exploration player (#4274)

* Introduce new hints banner in exploration player. * Fix a11y flow. This reverts the behavior to more or less match the previous flow to correctly indicate both when there are hints, and that the hitns can be opened.
oppia · May 6, 2022 · 6990e85 · 6990e85
1 parent bde9242
commit 6990e85
Show file tree

Hide file tree

Showing 9 changed files with 256 additions and 89 deletions.
diff --git a/app/src/main/res/drawable/ic_dot_yellow_24dp.xml b/app/src/main/res/drawable/ic_dot_yellow_24dp.xml
@@ -1,5 +1,5 @@
 <vector android:height="24dp" android:tint="#FFCD2A"
     android:viewportHeight="24.0" android:viewportWidth="24.0"
     android:width="24dp" xmlns:android="http://schemas.android.com/apk/res/android">
-    <path android:fillColor="#FF000000" android:pathData="M12,2C6.48,2 2,6.48 2,12s4.48,10 10,10 10,-4.48 10,-10S17.52,2 12,2z"/>
+    <path android:fillColor="#FFFFFFFF" android:pathData="M12,2C6.48,2 2,6.48 2,12s4.48,10 10,10 10,-4.48 10,-10S17.52,2 12,2z"/>
 </vector>
diff --git a/app/src/main/res/drawable/ic_hint_bulb_filled_yellow_48dp.xml b/app/src/main/res/drawable/ic_hint_bulb_filled_yellow_48dp.xml
@@ -0,0 +1,10 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+  android:width="48dp"
+  android:height="48dp"
+  android:viewportWidth="24"
+  android:viewportHeight="24"
+  android:tint="#ffc47f">
+    <path
+      android:fillColor="#FFFFFFFF"
+      android:pathData="M9,21c0,0.5 0.4,1 1,1h4c0.6,0 1,-0.5 1,-1v-1L9,20v1zM12,2C8.1,2 5,5.1 5,9c0,2.4 1.2,4.5 3,5.7L8,17c0,0.5 0.4,1 1,1h6c0.6,0 1,-0.5 1,-1v-2.3c1.8,-1.3 3,-3.4 3,-5.7 0,-3.9 -3.1,-7 -7,-7z"/>
+</vector>
diff --git a/app/src/main/res/drawable/ic_hint_bulb_white_48dp.xml b/app/src/main/res/drawable/ic_hint_bulb_white_48dp.xml
@@ -0,0 +1,5 @@
+<vector android:height="48dp" android:tint="#FFFFFF"
+    android:viewportHeight="24.0" android:viewportWidth="24.0"
+    android:width="48dp" xmlns:android="http://schemas.android.com/apk/res/android">
+    <path android:fillColor="#FF000000" android:pathData="M9,21c0,0.55 0.45,1 1,1h4c0.55,0 1,-0.45 1,-1v-1L9,20v1zM12,2C8.14,2 5,5.14 5,9c0,2.38 1.19,4.47 3,5.74L8,17c0,0.55 0.45,1 1,1h6c0.55,0 1,-0.45 1,-1v-2.26c1.81,-1.27 3,-3.36 3,-5.74 0,-3.86 -3.14,-7 -7,-7zM14.85,13.1l-0.85,0.6L14,16h-4v-2.3l-0.85,-0.6C7.8,12.16 7,10.63 7,9c0,-2.76 2.24,-5 5,-5s5,2.24 5,5c0,1.63 -0.8,3.16 -2.15,4.1z"/>
+</vector>
diff --git a/app/src/main/res/drawable/ic_keyboard_arrow_down_white_48dp.xml b/app/src/main/res/drawable/ic_keyboard_arrow_down_white_48dp.xml
@@ -0,0 +1,9 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+  android:width="48dp"
+  android:height="48dp"
+  android:viewportWidth="24.0"
+  android:viewportHeight="24.0">
+  <path
+    android:fillColor="#FFFFFFFF"
+    android:pathData="M7.41,7.84L12,12.42l4.59,-4.58L18,9.25l-6,6 -6,-6z" />
+</vector>
diff --git a/app/src/main/res/drawable/ic_keyboard_arrow_right_white_48.xml b/app/src/main/res/drawable/ic_keyboard_arrow_right_white_48.xml
@@ -0,0 +1,11 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+  android:width="48dp"
+  android:height="48dp"
+  android:viewportWidth="24"
+  android:viewportHeight="24"
+  android:tint="#FFFFFFFF"
+  android:autoMirrored="true">
+  <path
+    android:fillColor="#FFFFFFFF"
+    android:pathData="M8.59,16.59L13.17,12 8.59,7.41 10,6l6,6 -6,6 -1.41,-1.41z"/>
+</vector>
diff --git a/app/src/main/res/layout/state_fragment.xml b/app/src/main/res/layout/state_fragment.xml
@@ -99,32 +99,49 @@
       android:layout_width="match_parent"
       android:layout_height="match_parent" />
 
-    <FrameLayout
+    <androidx.constraintlayout.widget.ConstraintLayout
       android:id="@+id/hints_and_solution_fragment_container"
-      android:layout_width="wrap_content"
+      android:layout_width="match_parent"
       android:layout_height="wrap_content"
       android:layout_gravity="bottom|start"
-      android:background="@drawable/hints_background"
+      android:background="@color/audio_component_background"
       android:visibility="@{viewModel.isHintBulbVisible() ? View.VISIBLE : View.GONE}">
 
       <ImageView
-        android:id="@+id/dot_hint"
-        android:layout_width="8dp"
-        android:layout_height="6dp"
-        android:layout_gravity="top|end"
+        android:id="@+id/hint_bulb"
+        android:layout_width="wrap_content"
+        android:layout_height="wrap_content"
         android:layout_margin="8dp"
-        android:contentDescription="@string/new_hint_available"
-        app:srcCompat="@drawable/ic_dot_yellow_24dp"
-        android:visibility="@{viewModel.isHintOpenedAndUnRevealed() ? View.VISIBLE : View.GONE}" />
+        android:contentDescription="@{viewModel.isHintOpenedAndUnRevealed() ? @string/new_hint_available : @string/no_new_hint_available}"
+        app:srcCompat="@{viewModel.isHintOpenedAndUnRevealed() ? @drawable/ic_hint_bulb_filled_yellow_48dp : @drawable/ic_hint_bulb_white_48dp}"
+        app:layout_constraintTop_toTopOf="parent"
+        app:layout_constraintBottom_toBottomOf="parent"
+        app:layout_constraintStart_toStartOf="parent" />
+
+      <TextView
+        android:id="@+id/hint_bar_title"
+        android:layout_width="wrap_content"
+        android:layout_height="wrap_content"
+        android:layout_marginStart="16dp"
+        android:text="@string/hints_toolbar_title"
+        android:textSize="24sp"
+        android:textColor="@color/color_def_white"
+        app:layout_constraintTop_toTopOf="parent"
+        app:layout_constraintBottom_toBottomOf="parent"
+        app:layout_constraintStart_toEndOf="@+id/hint_bulb" />
 
       <ImageView
-        android:id="@+id/hint_bulb"
+        android:id="@+id/open_hint_dialog_arrow"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
-        android:layout_margin="12dp"
+        android:layout_margin="8dp"
         android:contentDescription="@string/show_hints_and_solution"
-        app:srcCompat="@drawable/ic_hint_bulb_white_24dp" />
-    </FrameLayout>
+        app:srcCompat="@{viewModel.isHintOpenedAndUnRevealed() ? @drawable/ic_keyboard_arrow_down_white_48dp : @drawable/ic_keyboard_arrow_right_white_48}"
+        app:layout_constraintTop_toTopOf="parent"
+        app:layout_constraintBottom_toBottomOf="parent"
+        app:layout_constraintEnd_toEndOf="parent" />
+
+    </androidx.constraintlayout.widget.ConstraintLayout>
 
     <FrameLayout
       android:layout_width="match_parent"

diff --git a/app/src/main/res/values/strings.xml b/app/src/main/res/values/strings.xml
@@ -429,6 +429,7 @@
   <string name="are_you_interested">Are you interested in:\n%s?</string>
   <!-- HintsAndSolutionDialogFragment -->
   <string name="new_hint_available">New hint available</string>
+  <string name="no_new_hint_available">No new hint available</string>
   <string name="show_hints_and_solution">Show hints and solution</string>
   <string name="hints_andSolution_close_icon_description">Navigate up</string>
   <string name="hints_toolbar_title">Hints</string>

diff --git a/app/src/sharedTest/java/org/oppia/android/app/player/state/StateFragmentTest.kt b/app/src/sharedTest/java/org/oppia/android/app/player/state/StateFragmentTest.kt
@@ -1229,58 +1229,6 @@ class StateFragmentTest {
     }
   }
 
-  @Test
-  fun testStateFragment_showHintsAndSolutionBulb_dotHasCorrectContentDescription() {
-    launchForExploration(FRACTIONS_EXPLORATION_ID_1, shouldSavePartialProgress = false).use {
-      startPlayingExploration()
-      selectMultipleChoiceOption(
-        optionPosition = 3,
-        expectedOptionText = "No, because, in a fraction, the pieces must be the same size."
-      )
-      clickSubmitAnswerButton()
-      clickContinueNavigationButton()
-
-      // Entering incorrect answer twice.
-      typeFractionText("1/2")
-      clickSubmitAnswerButton()
-      scrollToViewType(FRACTION_INPUT_INTERACTION)
-      typeFractionText("1/2")
-      clickSubmitAnswerButton()
-
-      onView(withId(R.id.dot_hint)).check(
-        matches(
-          withContentDescription(R.string.new_hint_available)
-        )
-      )
-    }
-  }
-
-  @Test
-  fun testStateFragment_showHintsAndSolutionBulb_bulbHasCorrectContentDescription() {
-    launchForExploration(FRACTIONS_EXPLORATION_ID_1, shouldSavePartialProgress = false).use {
-      startPlayingExploration()
-      selectMultipleChoiceOption(
-        optionPosition = 3,
-        expectedOptionText = "No, because, in a fraction, the pieces must be the same size."
-      )
-      clickSubmitAnswerButton()
-      clickContinueNavigationButton()
-
-      // Entering incorrect answer twice.
-      typeFractionText("1/2")
-      clickSubmitAnswerButton()
-      scrollToViewType(FRACTION_INPUT_INTERACTION)
-      typeFractionText("1/2")
-      clickSubmitAnswerButton()
-
-      onView(withId(R.id.hint_bulb)).check(
-        matches(
-          withContentDescription(R.string.show_hints_and_solution)
-        )
-      )
-    }
-  }
-
   @Test
   fun testStateFragment_forMisconception_showsLinkTextForConceptCard() {
     launchForExploration(FRACTIONS_EXPLORATION_ID_1, shouldSavePartialProgress = false).use {