Fix #153/#154 : MultipleChoice/ItemSelection Interaction View #188

app/src/main/java/org/oppia/app/player/state/CustomCheckbox.kt

@@ -0,0 +1,69 @@
+package org.oppia.app.player.state
+
+import android.content.Context
+import android.text.Html
+import android.text.Spannable
+import android.text.Spanned
+import android.view.View
+import android.widget.CheckBox
+import android.widget.CompoundButton
+import android.widget.TextView
+import android.widget.Toast
+import androidx.core.content.ContextCompat
+import org.oppia.app.R
+import org.oppia.util.data.UrlImageParser
+import android.content.res.ColorStateList
+import android.os.Build
+import android.view.Gravity
+
+// TODO(#163): Move this to a StateCardFragment Low-fi PR.
+/** Custom Checkbox for MultipleSelectionInputInteractionView. */
+class CustomCheckbox(context: Context, private val optionContents: String) : CheckBox(context) {
+
+  // Update default attributes of ItemSelectionInputInteractionView here.
+  init {
+    val paddingPixel = 2
+    val density = resources.displayMetrics.density
+    val paddingDp = (paddingPixel * density).toInt()
+    gravity = Gravity.LEFT
+    setTextColor(ContextCompat.getColor(context, R.color.oppiaDarkBlue))
+    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
+      setButtonTintList(
+        ColorStateList(
+          arrayOf(
+            intArrayOf(android.R.attr.state_enabled)
+          ),
+          intArrayOf(ContextCompat.getColor(context, R.color.oppiaDarkBlue))
+        )
+      );
+    }
+    setHighlightColor(ContextCompat.getColor(context, R.color.oppiaDarkBlue))
+    textSize = 16f
+    setPadding(paddingDp, paddingDp, paddingDp, paddingDp)
+    id = View.generateViewId()
+    text = convertHtmlToString(optionContents, rootView).toString()
+    setOnCheckedChangeListener(CompoundButton.OnCheckedChangeListener { buttonView, isChecked ->
+      val msg = "You have " + (if (isChecked) "checked" else "unchecked") + " this Check it Checkbox."
+      Toast.makeText(context, msg, Toast.LENGTH_SHORT).show()
+    })
+  }
+
+  fun convertHtmlToString(rawResponse: Any?, rdbtn: View): Spanned {
+    var htmlContent = rawResponse as String;
+    var result: Spanned
+    if (htmlContent!!.contains(CUSTOM_TAG)) {
+      htmlContent = htmlContent.replace(CUSTOM_TAG, HTML_TAG, false);
+      htmlContent = htmlContent.replace(CUSTOM_ATTRIBUTE, HTML_ATTRIBUTE, false);
+      htmlContent = htmlContent.replace(""", "")
+    }
+    var imageGetter = UrlImageParser(rdbtn as TextView, context)
+    val html: Spannable
+    if (android.os.Build.VERSION.SDK_INT >= android.os.Build.VERSION_CODES.N) {
+      html = Html.fromHtml(htmlContent, Html.FROM_HTML_MODE_LEGACY, imageGetter, null) as Spannable
+    } else {
+      html = Html.fromHtml(htmlContent, imageGetter, null) as Spannable
+    }
+    result = html
+    return result;
+  }
+}

app/src/main/java/org/oppia/app/player/state/CustomRadioButton.kt

@@ -0,0 +1,67 @@
+package org.oppia.app.player.state
+
+import android.content.Context
+import android.content.res.ColorStateList
+import android.os.Build
+import android.text.Html
+import android.text.Spannable
+import android.text.Spanned
+import android.util.Log
+import android.view.Gravity
+import android.view.View
+import android.widget.RadioButton
+import android.widget.TextView
+import androidx.core.content.ContextCompat
+import org.oppia.app.R
+import org.oppia.util.data.UrlImageParser
+
+const val CUSTOM_TAG = "oppia-noninteractive-image"
+const val HTML_TAG = "img"
+const val CUSTOM_ATTRIBUTE = "filepath-with-value"
+const val HTML_ATTRIBUTE = "src"
+
+// TODO(#163): Move this to a StateCardFragment Low-fi PR.
+/** Custom Checkbox for MultipleSelectionInputInteractionView. */
+class CustomRadioButton(context: Context,private val optionContents: String) : RadioButton(context) {
+
+  // Update default attributes of ItemSelectionInputInteractionView here.
+  init {
+    val paddingPixel = 2
+    val density = resources.displayMetrics.density
+    val paddingDp = (paddingPixel * density).toInt()
+    gravity = Gravity.LEFT
+    setTextColor(ContextCompat.getColor(context, R.color.oppiaDarkBlue))
+    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
+      setButtonTintList(ColorStateList(
+        arrayOf(
+          intArrayOf(android.R.attr.state_enabled)
+        ),
+        intArrayOf(ContextCompat.getColor(context, R.color.oppiaDarkBlue))
+      ));
+    }
+    setHighlightColor(ContextCompat.getColor(context, R.color.oppiaDarkBlue))
+    textSize = 16f
+    setPadding(paddingDp, paddingDp, paddingDp, paddingDp)
+    id = View.generateViewId()
+    text = convertHtmlToString(optionContents, rootView).toString()
+  }
+
+  fun convertHtmlToString(rawResponse: Any?, rdbtn: View): Spanned {
+    var htmlContent = rawResponse as String;
+    var result: Spanned
+    if (htmlContent!!.contains(CUSTOM_TAG)) {
+      htmlContent = htmlContent.replace(CUSTOM_TAG, HTML_TAG, false);
+      htmlContent = htmlContent.replace(CUSTOM_ATTRIBUTE, HTML_ATTRIBUTE, false);
+      htmlContent = htmlContent.replace(""", "")
+    }
+    var imageGetter = UrlImageParser(rdbtn as TextView, context)
+    val html: Spannable
+    if (android.os.Build.VERSION.SDK_INT >= android.os.Build.VERSION_CODES.N) {
+      html = Html.fromHtml(htmlContent, Html.FROM_HTML_MODE_LEGACY, imageGetter, null) as Spannable
+    } else {
+      html = Html.fromHtml(htmlContent, imageGetter, null) as Spannable
+    }
+    result = html
+    return result;
+  }
+}

app/src/main/java/org/oppia/app/player/state/StateFragmentPresenter.kt

@@ -1,26 +1,41 @@
 package org.oppia.app.player.state
 
+import android.content.Context
 import android.view.LayoutInflater
 import android.view.View
 import android.view.ViewGroup
+import android.widget.LinearLayout
+import android.widget.RadioButton
+import android.widget.RadioGroup
+import android.widget.Toast
 import androidx.fragment.app.Fragment
+import kotlinx.android.synthetic.main.state_fragment.view.*
+import org.oppia.app.application.ApplicationContext
 import org.oppia.app.databinding.StateFragmentBinding
 import org.oppia.app.fragment.FragmentScope
 import org.oppia.app.viewmodel.ViewModelProvider
+import org.oppia.data.backends.gae.model.GaeCustomizationArgs
 import javax.inject.Inject
 
 /** The presenter for [StateFragment]. */
 @FragmentScope
 class StateFragmentPresenter @Inject constructor(
+  @ApplicationContext private val context: Context,
   private val fragment: Fragment,
   private val viewModelProvider: ViewModelProvider<StateViewModel>
 ) {
+
+  var gaeCustomizationArgsMap = HashMap<String, GaeCustomizationArgs>()
+  var interactionInstanceId: String? = null
+
   fun handleCreateView(inflater: LayoutInflater, container: ViewGroup?): View? {
-    val binding = StateFragmentBinding.inflate(inflater, container, /* attachToRoot= */ false)
+  val binding = StateFragmentBinding.inflate(inflater, container, /* attachToRoot= */ false)
     binding.let {
       it.stateFragment = fragment as StateFragment
       it.viewModel = getStateViewModel()
     }
+    createDummyData()
+    showInputInteractions(binding)
     return binding.root
   }
 
@@ -31,4 +46,62 @@ class StateFragmentPresenter @Inject constructor(
   fun setAudioFragmentVisible(isVisible: Boolean) {
     getStateViewModel().setAudioFragmentVisible(isVisible)
   }
+
+  private fun createDummyData() {
+    interactionInstanceId = "ItemSelectionInput"
+    var sampleData: GaeCustomizationArgs =
+      GaeCustomizationArgs(true, "<p>The numerator.</p>, <p>The denominator.</p>, <p>I can't remember!</p>]")
+    gaeCustomizationArgsMap?.put("choices", sampleData)
+  }
+
+  private fun showInputInteractions(binding: StateFragmentBinding) {
+    val gaeCustomizationArgs: Any? = gaeCustomizationArgsMap!!.get("choices")?.value
+    if (interactionInstanceId.equals("MultipleChoiceInput")) {
+      val gaeCustomArgsInString: String = gaeCustomizationArgs.toString().replace("[", "").replace("]", "")
+      var items = gaeCustomArgsInString.split(",").toTypedArray()
+      addRadioButtons(items,binding)
+    } else if (interactionInstanceId.equals("ItemSelectionInput") || interactionInstanceId.equals("SingleChoiceInput")) {
+      val gaeCustomArgsInString: String = gaeCustomizationArgs.toString().replace("[", "").replace("]", "")
+      var items = gaeCustomArgsInString.split(",").toTypedArray()
+      addCheckbox(items,binding)
+    } else {
+      //Do no show any view
+    }
+  }
+
+  fun addCheckbox(optionsArray: Array<String>, binding: StateFragmentBinding) {
+    for (row in 0..0) {
+      for (i in 0..optionsArray.size - 1) {
+        val cb = CustomCheckbox(context, optionsArray[i])
+        binding.root.interactionContainer.addView(cb)
+      }
+    }
+  }
+
+  fun addRadioButtons(
+    optionsArray: Array<String>,
+    binding: StateFragmentBinding
+  ) {
+    for (row in 0..0) {
+      val rg = RadioGroup(context)
+      rg.orientation = LinearLayout.VERTICAL
+      for (i in 0..optionsArray.size - 1) {
+        val rdbtn = CustomRadioButton(context, optionsArray[i])
+        rg.setOnCheckedChangeListener(object : RadioGroup.OnCheckedChangeListener {
+          override fun onCheckedChanged(group: RadioGroup, checkedId: Int) {
+            for (i in 0 until group.childCount) {
+              val btn = group.getChildAt(i) as RadioButton
+              if (btn.id == checkedId) {
+                val text = btn.text
+                Toast.makeText(context, "" + text, Toast.LENGTH_LONG).show()
+                return
+              }
+            }
+          }
+        })
+        rg.addView(rdbtn)
+      }
+      binding.root.interactionRadioGroup.addView(rg)
+    }
+  }
 }

app/src/main/res/layout/state_fragment.xml

@@ -1,7 +1,8 @@
 <?xml version="1.0" encoding="utf-8"?>
 <layout
   xmlns:android="http://schemas.android.com/apk/res/android"
-  xmlns:app="http://schemas.android.com/apk/res-auto">
+  xmlns:app="http://schemas.android.com/apk/res-auto"
+  xmlns:tools="http://schemas.android.com/tools">
   <data>
     <import type="android.view.View"/>
     <variable
@@ -15,6 +16,7 @@
     android:layout_width="match_parent"
     android:layout_height="match_parent">
     <LinearLayout
+      android:id="@+id/linearLayout"
       android:layout_width="0dp"
       android:layout_height="wrap_content"
       android:layout_marginStart="24dp"
@@ -29,6 +31,24 @@
         android:layout_width="match_parent"
         android:layout_height="wrap_content"/>
     </LinearLayout>
+    <LinearLayout
+      android:id="@+id/interactionContainer"
+      android:layout_width="match_parent"
+      android:layout_height="wrap_content"
+      android:layout_margin="8dp"
+      android:background="@color/white"
+      android:orientation="vertical"
+      android:padding="8dp"
+      app:layout_constraintBottom_toTopOf="@+id/dummy_audio_button"
+      app:layout_constraintTop_toBottomOf="@+id/linearLayout"
+      tools:layout_editor_absoluteX="8dp">
+      <RadioGroup
+        android:id="@+id/interactionRadioGroup"
+        android:layout_width="match_parent"
+        android:layout_height="wrap_content"
+        android:padding="16dp">
+      </RadioGroup>
+    </LinearLayout>
     <Button
       android:id="@+id/dummy_audio_button"
       android:layout_width="wrap_content"

app/src/main/res/values/colors.xml

@@ -13,4 +13,7 @@
   <color name="white">#FFFFFF</color>
   <!-- AUDIO COMPONENT -->
   <color name="audioComponentBackground">@color/oppiaDarkBlue</color>
+
+  <color name="blue_100">#0F0086FB</color>
+  <color name="blue_200">#6B0086FB</color>
 </resources>

app/src/sharedTest/java/org/oppia/app/player/state/StateFragmentPresenterTest.kt

@@ -0,0 +1,81 @@
+package org.oppia.app.player.state;
+
+import android.provider.MediaStore
+import android.view.View
+import androidx.test.core.app.ActivityScenario
+import androidx.test.espresso.Espresso.onView
+import androidx.test.espresso.action.ViewActions.click
+import androidx.test.espresso.matcher.ViewMatchers
+import androidx.test.espresso.matcher.ViewMatchers.isDescendantOfA
+import androidx.test.espresso.matcher.ViewMatchers.withId
+import androidx.test.espresso.matcher.ViewMatchers.withText
+import androidx.test.ext.junit.runners.AndroidJUnit4
+import org.hamcrest.Matchers.allOf
+import org.junit.Test
+import org.junit.runner.RunWith
+import org.oppia.app.R
+import org.oppia.app.home.HomeActivity
+import org.oppia.app.player.exploration.ExplorationActivity
+import android.widget.TextView
+import android.widget.LinearLayout
+import android.widget.RadioGroup
+import androidx.test.espresso.matcher.ViewMatchers.isDisplayed
+import androidx.test.espresso.ViewAction
+import androidx.test.platform.ui.UiController
+import junit.framework.TestCase.assertEquals
+import org.hamcrest.Matcher
+
+/** Tests for [StateFragmentPresenter]. */
+@RunWith(AndroidJUnit4::class)
+class StateFragmentPresenterTest {
+  var interactionInstanceId: String? = null
+
+  @Test
+  fun testMultipleSelectionInputInteraction() {
+    ActivityScenario.launch(ExplorationActivity::class.java).use {
+      interactionInstanceId = "MultipleChoiceInput"
+      assertEquals(interactionInstanceId, "MultipleChoiceInput")
+      onView(withId(R.id.interactionRadioGroup)).perform(object : ViewAction {
+
+        override fun getConstraints(): Matcher<View> {
+          return isDisplayed()
+        }
+
+        override fun getDescription(): String {
+          return "Performing click"
+        }
+
+        override fun perform(uiController: androidx.test.espresso.UiController?, view: View?) {
+          val parentRadioGroup = view as RadioGroup
+          val linearLayout = parentRadioGroup.getChildAt(0) as RadioGroup
+          val radioButton = linearLayout.getChildAt(0) as CustomRadioButton
+          radioButton.performClick()
+        }
+      })
+    }
+  }
+
+  @Test
+  fun testItemSelectionInputInteraction() {
+    ActivityScenario.launch(ExplorationActivity::class.java).use {
+      interactionInstanceId = "ItemSelectionInput"
+      assertEquals(interactionInstanceId, "ItemSelectionInput")
+      onView(withId(R.id.interactionContainer)).perform(object : ViewAction {
+
+        override fun getConstraints(): Matcher<View> {
+          return isDisplayed()
+        }
+
+        override fun getDescription(): String {
+          return "Performing click"
+        }
+
+        override fun perform(uiController: androidx.test.espresso.UiController?, view: View?) {
+          val parentLinearLayout = view as LinearLayout
+          val checkbox = parentLinearLayout.getChildAt(1) as CustomCheckbox
+          checkbox.performClick()
+        }
+      })
+    }
+  }
+}

utility/build.gradle

@@ -43,7 +43,8 @@ dependencies {
       'androidx.appcompat:appcompat:1.0.2',
       'androidx.lifecycle:lifecycle-livedata-ktx:2.2.0-alpha03',
       'com.google.dagger:dagger:2.24',
-      "org.jetbrains.kotlin:kotlin-stdlib-jdk7:$kotlin_version"
+      "org.jetbrains.kotlin:kotlin-stdlib-jdk7:$kotlin_version",
+      'com.github.bumptech.glide:glide:4.9.0',
   )
   testImplementation(
       'androidx.test.ext:junit:1.1.1',