Repository: oppia/oppia

Issue:
About the Add item button questions
**Is your feature request related to a problem? Please describe.**
When students come to this kind of questions where the answer is several numbers and they needed to click add item button each time they enter a number they got confused because the length of the input box is too long . They thought that they should add more than one number; one student wrote all her answers in the same box, separated by spaces. This only happens the first time students encounter this.
**Describe the solution you'd like**
I suggest reducing the length of the input box to fit only one number. 
Change text of add item to add another number, or add another answer


![image](https://user-images.githubusercontent.com/16443315/72670637-58cb5b80-3a48-11ea-9023-4ff237bedb39.png)


About the Add item button questions
**Is your feature request related to a problem? Please describe.**
When students come to this kind of questions where the answer is several numbers and they needed to click add item button each time they enter a number they got confused because the length of the input box is too long . They thought that they should add more than one number; one student wrote all her answers in the same box, separated by spaces. This only happens the first time students encounter this.
**Describe the solution you'd like**
I suggest reducing the length of the input box to fit only one number. 
Change text of add item to add another number, or add another answer


![image](https://user-images.githubusercontent.com/16443315/72670637-58cb5b80-3a48-11ea-9023-4ff237bedb39.png)




Discussion:
Hi @yamamashakaa.
If I'm not wrong, the input is not just specific to numbers which is why I believe the width is kept so long. 
One possible fix to this issue might be to have a dynamic width which adjusts based on the input size.
Something like this:

![text_input](https://user-images.githubusercontent.com/35144226/72777780-d1930900-3c3c-11ea-9c1a-6e476bfe2d8f.gif)

I can create a PR with this change if it's acceptable.
Hi @iamprayush ,
All the examples I passed by that contains the add item button , the item was a number.
I think that single item could be a word or a number  (One thing ) and in all cases the size gave the indication that the item should be something that fill the box.
The dynamic length idea is good. Let ask @seanlip first.
I just checked the number line lesson and I noticed a lot of long input boxes the only one that caused  problem was the add item question. 
I'm not sure that changing the width of the input box is the right approach for this, given that it happened only once and that students were not confused in other similar questions.

Instead, I think it is the text and (lack of) instructions that might be confusing. What do you think about updating the question / instructions to say "Add one number per box", and changing the text in the button to "Add another number"? The former is a text change in the story, but the latter might require some platform work in order to allow creators to customize the text on the edit button.

/cc @yamamashakaa 
@seanlip Maybe instead of adding explicit instructions(which might make the UI a bit cluttered imo), some subtle UI indications might also serve the purpose.
What do you think about something like this:
![add-item](https://user-images.githubusercontent.com/35144226/73084365-d680e280-3ef2-11ea-9947-8c27a7ad19b4.gif)

/cc @yamamashakaa 
I suspect it won't be clear, tbh -- "item" is still rather non-specific. But I think we do need to get @yamamashakaa's opinion here. 

@seanlip  @iamprayush     I go with make the instruction more clear  and specific for each step. For example, at the beginning "Add one number per box "  Then " click the button if you want to add more numbers "
 Also, I find it very good idea if the button text is more specific and set by the lesson creator. (But I think there should be a default value if the creator don't want to add text"
@yamamashakaa I just discovered that there is already an instruction present that suggests the user to add one item per box which gets shown when the input has lost focus while it was empty. Something like this:
![current](https://user-images.githubusercontent.com/35144226/73149305-a9952100-40e6-11ea-95d0-682147624cf2.gif)

But, this is not too apparent so maybe we can get rid of this and add a placeholder in the input box which would result in this:
![new](https://user-images.githubusercontent.com/35144226/73149407-32ac5800-40e7-11ea-972c-bd96a347fc80.gif)

Now, about the "click the button if you want to add more numbers", how did you imagine this to be added? Should this be added as a tooltip that pops up near the button when the first item is added?
Like this:
![Screenshot from 2020-01-27 09-44-48](https://user-images.githubusercontent.com/35144226/73149970-e7477900-40e9-11ea-85fc-cd9b19ffd4bc.png)

Lastly, I think just changing the button text to "Add number" or "Add another number" ought to be sufficient given the number of hints that we'd already be adding.
I can create a PR with these changes if you agree.

/cc @seanlip 

I'll defer to @yamamashakaa on the rest, but re the last part: I think we need to add an option for the creator to specify the button text. That's because the items in this interaction type may not always be numbers.
@iamprayush   @seanlip  I think that  the instruction message should always appear clearly once the student read the question not just after they put the cursor in the input box. This video shows how the message did not appear at the first once the question page is opened.
https://youtu.be/d5vghWEG33k
Make the message visible all the time weather it is outside the box or inside the box will work fine I think.






> 
> 
> I'll defer to @yamamashakaa on the rest, but re the last part: I think we need to add an option for the creator to specify the button text. That's because the items in this interaction type may not always be numbers.

I think I should try to create lesson in order to understand the process better. What I thought is having a default general  value will help the lesson creator in case they don't want to do more work and think about the message.
@yamamashakaa @seanlip 
Just so that we are all on the same page:
 * The placeholder inside the input box should be added to show the instructions when the user is outside the input box.
 * The tooltip should get displayed when the user hovers over the add button. (Or we could show the tooltip for a couple of seconds when the user starts typing their first item, whatever you think is more appropriate).
 * The add button should have a customizable text which the creator can specify while adding this interaction and should have a default text of "Add item".
> 
> 
> @yamamashakaa @seanlip
> Just so that we are all on the same page:
> 
>     * The placeholder inside the input box should be added to show the instructions when the user is outside the input box.
> 
>     * The tooltip should get displayed when the user hovers over the add button. (Or we could show the tooltip for a couple of seconds when the user starts typing their first item, whatever you think is more appropriate).
> 
>     * The add button should have a customizable text which the creator can specify while adding this interaction and should have a default text of "Add item".

For the first point,  In my opinion weather the instructions inside or out side the box it should be shown with the question not just when the user go to the input box to answer .

For the tooltip, I go with showing it when the user is typing but it is OK to show it when hover the button. 
And yes for the third point.

Thanks @iamprayush 
Hi @yamamashakaa.
If I'm not wrong, the input is not just specific to numbers which is why I believe the width is kept so long. 
One possible fix to this issue might be to have a dynamic width which adjusts based on the input size.
Something like this:

![text_input](https://user-images.githubusercontent.com/35144226/72777780-d1930900-3c3c-11ea-9c1a-6e476bfe2d8f.gif)

I can create a PR with this change if it's acceptable.
Hi @iamprayush ,
All the examples I passed by that contains the add item button , the item was a number.
I think that single item could be a word or a number  (One thing ) and in all cases the size gave the indication that the item should be something that fill the box.
The dynamic length idea is good. Let ask @seanlip first.
I just checked the number line lesson and I noticed a lot of long input boxes the only one that caused  problem was the add item question. 
I'm not sure that changing the width of the input box is the right approach for this, given that it happened only once and that students were not confused in other similar questions.

Instead, I think it is the text and (lack of) instructions that might be confusing. What do you think about updating the question / instructions to say "Add one number per box", and changing the text in the button to "Add another number"? The former is a text change in the story, but the latter might require some platform work in order to allow creators to customize the text on the edit button.

/cc @yamamashakaa 
@seanlip Maybe instead of adding explicit instructions(which might make the UI a bit cluttered imo), some subtle UI indications might also serve the purpose.
What do you think about something like this:
![add-item](https://user-images.githubusercontent.com/35144226/73084365-d680e280-3ef2-11ea-9947-8c27a7ad19b4.gif)

/cc @yamamashakaa 
I suspect it won't be clear, tbh -- "item" is still rather non-specific. But I think we do need to get @yamamashakaa's opinion here. 

@seanlip  @iamprayush     I go with make the instruction more clear  and specific for each step. For example, at the beginning "Add one number per box "  Then " click the button if you want to add more numbers "
 Also, I find it very good idea if the button text is more specific and set by the lesson creator. (But I think there should be a default value if the creator don't want to add text"
@yamamashakaa I just discovered that there is already an instruction present that suggests the user to add one item per box which gets shown when the input has lost focus while it was empty. Something like this:
![current](https://user-images.githubusercontent.com/35144226/73149305-a9952100-40e6-11ea-95d0-682147624cf2.gif)

But, this is not too apparent so maybe we can get rid of this and add a placeholder in the input box which would result in this:
![new](https://user-images.githubusercontent.com/35144226/73149407-32ac5800-40e7-11ea-972c-bd96a347fc80.gif)

Now, about the "click the button if you want to add more numbers", how did you imagine this to be added? Should this be added as a tooltip that pops up near the button when the first item is added?
Like this:
![Screenshot from 2020-01-27 09-44-48](https://user-images.githubusercontent.com/35144226/73149970-e7477900-40e9-11ea-85fc-cd9b19ffd4bc.png)

Lastly, I think just changing the button text to "Add number" or "Add another number" ought to be sufficient given the number of hints that we'd already be adding.
I can create a PR with these changes if you agree.

/cc @seanlip 

I'll defer to @yamamashakaa on the rest, but re the last part: I think we need to add an option for the creator to specify the button text. That's because the items in this interaction type may not always be numbers.
@iamprayush   @seanlip  I think that  the instruction message should always appear clearly once the student read the question not just after they put the cursor in the input box. This video shows how the message did not appear at the first once the question page is opened.
https://youtu.be/d5vghWEG33k
Make the message visible all the time weather it is outside the box or inside the box will work fine I think.






> 
> 
> I'll defer to @yamamashakaa on the rest, but re the last part: I think we need to add an option for the creator to specify the button text. That's because the items in this interaction type may not always be numbers.

I think I should try to create lesson in order to understand the process better. What I thought is having a default general  value will help the lesson creator in case they don't want to do more work and think about the message.
@yamamashakaa @seanlip 
Just so that we are all on the same page:
 * The placeholder inside the input box should be added to show the instructions when the user is outside the input box.
 * The tooltip should get displayed when the user hovers over the add button. (Or we could show the tooltip for a couple of seconds when the user starts typing their first item, whatever you think is more appropriate).
 * The add button should have a customizable text which the creator can specify while adding this interaction and should have a default text of "Add item".
> 
> 
> @yamamashakaa @seanlip
> Just so that we are all on the same page:
> 
>     * The placeholder inside the input box should be added to show the instructions when the user is outside the input box.
> 
>     * The tooltip should get displayed when the user hovers over the add button. (Or we could show the tooltip for a couple of seconds when the user starts typing their first item, whatever you think is more appropriate).
> 
>     * The add button should have a customizable text which the creator can specify while adding this interaction and should have a default text of "Add item".

For the first point,  In my opinion weather the instructions inside or out side the box it should be shown with the question not just when the user go to the input box to answer .

For the tooltip, I go with showing it when the user is typing but it is OK to show it when hover the button. 
And yes for the third point.

Thanks @iamprayush 

Resolving patch:
diff --git a/extensions/interactions/SetInput/SetInput.py b/extensions/interactions/SetInput/SetInput.py
--- a/extensions/interactions/SetInput/SetInput.py
+++ b/extensions/interactions/SetInput/SetInput.py
@@ -38,7 +38,14 @@ class SetInput(base.BaseInteraction):
 
     # NB: There used to be a UnicodeString-typed parameter here called
     # 'element_type'. This has since been removed.
-    _customization_arg_specs = []
+    _customization_arg_specs = [{
+        'name': 'buttonText',
+        'description': 'Customize the "Add" button text:',
+        'schema': {
+            'type': 'unicode',
+        },
+        'default_value': 'Add item'
+    }]
 
     _answer_visualization_specs = [{
         # Table with answer counts for top N answers.


Test patch: