Fix #6016: Limited the selection area of multiple choice option #6029

mighty-phoenix · 2018-12-24T19:52:01Z

Explanation

Fixes #6016: Changed the width property in css of multiple choice option from 100% to auto.
By doing this, the selection area is limited to the radio button and text. This prevents accidental selection of an option by clicking somewhere on the div where no text is present.

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 linter/Karma presubmit checks have passed.
- These should run automatically, but if not, you can manually trigger them locally using python scripts/pre_commit_linter.py and bash scripts/run_frontend_tests.sh.
The PR is made from a branch that's not called "develop".
The PR follows the style guide.
The PR is assigned to an appropriate reviewer.
- If you're a new contributor, please ask on Gitter for someone to assign a reviewer.
- If you're not sure who the appropriate reviewer is, please assign to the issue's "owner" -- see the "talk-to" label on the issue.

codecov-io · 2018-12-24T20:40:48Z

Codecov Report

Merging #6029 into develop will not change coverage.
The diff coverage is n/a.

@@           Coverage Diff           @@
##           develop   #6029   +/-   ##
=======================================
  Coverage     45.3%   45.3%           
=======================================
  Files          520     520           
  Lines        30667   30667           
  Branches      4597    4597           
=======================================
  Hits         13893   13893           
  Misses       16774   16774

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update ef0bd13...9990be9. Read the comment docs.

nithusha21 · 2018-12-25T06:50:19Z

Did you test this on Firefox to make sure that the behavior stated in the comment is retained after changing the width?

mighty-phoenix · 2018-12-25T12:14:25Z

@nithusha21 yes I did. Thanks for asking.

bansalnitish

Hi @rakshitkumarcse This looks good to me, but I have a doubt.

If you have an item in item selection (say) which extends over second line but doesn't fills the second line completely then also your PR selects the radio button for the entire width (see the screenshot for the reference). I'm not sure whether this is expected, though I'm satisfied with the behaviour.

@nithusha21, @DubeySandeep what do you say?

extensions/interactions/MultipleChoiceInput/static/multiple_choice_input.css

mighty-phoenix · 2018-12-25T21:21:47Z

@bansalnitish Thanks for the review.
I believe the expected behavior should have been otherwise(i.e. entire width shouldn't be selected). However, due to limitations of html and css, a div(or in that case any container) cannot be irregularly shaped. So, I believe that the expected behavior can't be achieved in multi lined choices. However, this PR will serve the purpose for single line multiple choice interactions.
Thanks!

mighty-phoenix · 2018-12-26T17:43:34Z

@bansalnitish Can you think of any way this can be dealt with in a better way?
Thanks.

bansalnitish · 2018-12-26T17:44:19Z

To me personally, this looks good. Lets wait for other folks to give there opinion.
Thanks

mighty-phoenix · 2018-12-26T18:04:52Z

@bansalnitish Alright. Thanks.

nithusha21 · 2018-12-27T06:33:38Z

extensions/interactions/MultipleChoiceInput/static/multiple_choice_input.css

@@ -8,7 +8,8 @@
  color: #0D48A1;
  text-align: left;
  /* This is needed so that images stay bounded by the container in Firefox. */
-  width: 100%;


I was talking about the comment on line 10.

Yes I know. The comment stands correct now as well. I have tested it.
Thanks!

nithusha21 · 2018-12-27T06:37:33Z

Can we change the mouse pointer from an arrow to the "click" icon? That should clear up some confusion.

mighty-phoenix · 2018-12-27T07:25:32Z

@nithusha21 I find your suggestion pretty good.
Should I change the mouse pointer to arrow?

mighty-phoenix · 2018-12-27T07:28:16Z

@nithusha21 I just noticed one more thing. I see an arrow itself in the selection area. I am using firefox.
@bansalnitish Which browser are you using?

bansalnitish · 2018-12-27T17:30:54Z

@nithusha21 If we use the click icon, still we'll get the same issue. The click icon would appear in the second line, where there is no text (as in screenshot above).

Also, hovering the mouse over the text and radio button highlights the radio button, isn't this itself indicating something like click?

@rakshitkumarcse I used chrome. (I'll test this on firefox too.)

mighty-phoenix · 2018-12-27T18:12:42Z

@bansalnitish I agree with your views.

mighty-phoenix · 2018-12-30T19:03:25Z

@bansalnitish What do we finally do about this?

DubeySandeep · 2019-01-03T09:38:54Z

If you have an item in item selection (say) which extends over second line but doesn't fills the second line completely then also your PR selects the radio button for the entire width (see the screenshot for the reference). I'm not sure whether this is expected, though I'm satisfied with the behaviour.

@bansalnitish, It's fine to have this behaviour there's nothing wrong here!

DubeySandeep · 2019-01-03T09:46:15Z

@rakshitkumarcse, this can be merged after testing images as multiple choice option in the interaction (on Firefox). So let's wait for @bansalnitish UI review.

mighty-phoenix · 2019-01-03T11:22:33Z

@DubeySandeep Sure. Thanks for your views.
Although I have tested the interaction with images, it would be better if @bansalnitish does a final review as well.
Thanks!

bansalnitish

LGTM!

Fix:oppia#6016: Limited the selection area of multiple choice option

9bcf852

mighty-phoenix requested review from nithusha21 and bansalnitish and removed request for nithusha21 December 24, 2018 19:56

bansalnitish self-assigned this Dec 24, 2018

bansalnitish reviewed Dec 25, 2018

View reviewed changes

extensions/interactions/MultipleChoiceInput/static/multiple_choice_input.css Outdated Show resolved Hide resolved

Improved comment

9990be9

nithusha21 reviewed Dec 27, 2018

View reviewed changes

bansalnitish approved these changes Jan 3, 2019

View reviewed changes

bansalnitish merged commit abaed1f into oppia:develop Jan 3, 2019

mighty-phoenix deleted the fix_width_multiple branch January 3, 2019 16:46

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Fix #6016: Limited the selection area of multiple choice option #6029

Fix #6016: Limited the selection area of multiple choice option #6029

mighty-phoenix commented Dec 24, 2018 •

edited

Loading

codecov-io commented Dec 24, 2018 •

edited

Loading

nithusha21 commented Dec 25, 2018

mighty-phoenix commented Dec 25, 2018

bansalnitish left a comment

mighty-phoenix commented Dec 25, 2018 •

edited

Loading

mighty-phoenix commented Dec 26, 2018

bansalnitish commented Dec 26, 2018

mighty-phoenix commented Dec 26, 2018

nithusha21 Dec 27, 2018

mighty-phoenix Dec 27, 2018 •

edited

Loading

nithusha21 commented Dec 27, 2018

mighty-phoenix commented Dec 27, 2018

mighty-phoenix commented Dec 27, 2018

bansalnitish commented Dec 27, 2018 •

edited

Loading

mighty-phoenix commented Dec 27, 2018

mighty-phoenix commented Dec 30, 2018

DubeySandeep commented Jan 3, 2019

DubeySandeep commented Jan 3, 2019 •

edited

Loading

mighty-phoenix commented Jan 3, 2019

bansalnitish left a comment

Fix #6016: Limited the selection area of multiple choice option #6029

Fix #6016: Limited the selection area of multiple choice option #6029

Conversation

mighty-phoenix commented Dec 24, 2018 • edited Loading

Explanation

Checklist

codecov-io commented Dec 24, 2018 • edited Loading

Codecov Report

nithusha21 commented Dec 25, 2018

mighty-phoenix commented Dec 25, 2018

bansalnitish left a comment

Choose a reason for hiding this comment

mighty-phoenix commented Dec 25, 2018 • edited Loading

mighty-phoenix commented Dec 26, 2018

bansalnitish commented Dec 26, 2018

mighty-phoenix commented Dec 26, 2018

nithusha21 Dec 27, 2018

Choose a reason for hiding this comment

mighty-phoenix Dec 27, 2018 • edited Loading

Choose a reason for hiding this comment

nithusha21 commented Dec 27, 2018

mighty-phoenix commented Dec 27, 2018

mighty-phoenix commented Dec 27, 2018

bansalnitish commented Dec 27, 2018 • edited Loading

mighty-phoenix commented Dec 27, 2018

mighty-phoenix commented Dec 30, 2018

DubeySandeep commented Jan 3, 2019

DubeySandeep commented Jan 3, 2019 • edited Loading

mighty-phoenix commented Jan 3, 2019

bansalnitish left a comment

Choose a reason for hiding this comment

mighty-phoenix commented Dec 24, 2018 •

edited

Loading

codecov-io commented Dec 24, 2018 •

edited

Loading

mighty-phoenix commented Dec 25, 2018 •

edited

Loading

mighty-phoenix Dec 27, 2018 •

edited

Loading

bansalnitish commented Dec 27, 2018 •

edited

Loading

DubeySandeep commented Jan 3, 2019 •

edited

Loading