oppia / oppia

A free, online learning platform to make quality education accessible for all.
https://www.oppia.org
Apache License 2.0
5.8k stars 4.01k forks source link

Provide a warning to the exploration creator when the height of the "content" part of a card exceeds (approximately) 630px. #3074

Closed seanlip closed 5 years ago

seanlip commented 7 years ago

From user interviews, we've found that long cards feel a bit burdensome to read, and that this can turn students off. This feeling seems to occur before the learner has actually read the card, so it's likely due to the visual height of the card being too large.

In order to encourage people to create lessons that students would play through to the end, we would like to show a notification/warning of some kind if the content part of a card gets too large. We could detect this by having an offscreen "shadow" preview of the card, and calculating the height of this card when a change to the card's content is made, toggling the warning display appropriately. The warning would suggest that the exploration creator splits the long card into two, and "teases" the second one from the first (e.g. "click 'Continue' to learn more about how to do X").

Note to contributors: please provide a mock or two showing what you'd like the creator experience to look like, before tackling the coding part of this issue. Thanks!

/cc @rachelwchen

1995YogeshSharma commented 7 years ago
seanlip commented 7 years ago

No, this should appear ambiently somehow I think, perhaps as a light red warning below the RTE. It shouldn't block normal operation.

@rachelwchen any thoughts?

srikar0896 commented 7 years ago

@seanlip hello sir according to the problem i think it has to be done according to the number of characters rather than height of the content because the height may vary for different user with different screen resolutions.I mean to say .- "warning to the exploration creator when number of characters exceeds 100 or so .."?

seanlip commented 7 years ago

It's a good question, but during user tests we noticed that this was more because the card was perceived to be long -- students do not count the number of characters in the card before deciding that it's long. The main factor here seems to be height, so that's why this issue refers to that.

srikar0896 commented 7 years ago

@seanlip okay.can you assign this to me..i will proceed on this

seanlip commented 7 years ago

Hi @srikar0896, I recommend finishing the other issue you're doing first. It's simpler!

srikar0896 commented 7 years ago

@seanlip can I proceed on this issue.?

seanlip commented 7 years ago

Yes, you can take it. Please provide a description of your implementation approach (+ mocks of how it will look like) before starting implementation. If that looks good, we'll assign this issue to you. Thanks!

srikar0896 commented 7 years ago

Ok

srikar0896 commented 7 years ago

@seanlip is it a good idea to create a directive for the content card.in which we watch the height of the the content card .If height exceeds 630px we will append a span or alert message(will decide after implementation)to the end content card.?

seanlip commented 7 years ago

Creating a separate off-screen directive could work, yes. For feedback on the span/alert message we would need to see a mock showing the proposed behaviour.

srikar0896 commented 7 years ago

Ok

srikar0896 commented 7 years ago

@seanlip please suggest the warning message? image

rachelwchen commented 7 years ago

I'd prefer something more gentle & less computer-ish -- just in case the users don't know what 630px means. Something like

"You've reached the suggested card height!"

Also, I feel that the red text combined with the (!) icon makes the message look like an error message, rather than a friendly reminder. Perhaps pick another color -- blue or orange? -- OR take the (!) out?

Thank you @srikar.ch!

On Tue, Feb 28, 2017 at 4:07 AM srikar.ch notifications@github.com wrote:

@seanlip https://github.com/seanlip what should be there in the warning message? [image: image] https://cloud.githubusercontent.com/assets/17567875/23404733/7a6dbae0-fddc-11e6-883c-ed48996859a8.png

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/oppia/oppia/issues/3074#issuecomment-283022514, or mute the thread https://github.com/notifications/unsubscribe-auth/ALmJ21q1p0JXhZvgDK18CtHlrk5uz-pwks5rhA4AgaJpZM4MC0Ql .

-- Rachel Chen Sent from mobile.

srikar0896 commented 7 years ago

image

@rachelwchen @seanlip please review the directive before i make a commit if any changes are required. oppia.directive('heightWatcher', [function() { return { restrict: 'A', link:function(scope, element, attrs) { scope.$watch( function() { return element[0].offsetHeight; }, function(newVal,oldVal) { if (newVal!==oldVal) { if (newVal>300 - 40) { if(angular.element(element[0]).find("#heightchecker").length == 0){ angular.element(element[0]).append( '<span id="heightchecker"' +'style="color:#0277BD">' +'<i class="material-icons">&#xE88F;</i>' +'You have reached suggested card height' +'</span>'); } }else { angular.element(element[0]).find("#heightchecker").remove(); } } },true); } }; }]);

seanlip commented 7 years ago

Although we can review mocks/screenshots in an issue (though I'll defer to @rachelwchen on this), we recommend submitting a PR if you actually want code to be reviewed. This is because, in an issue, we can't leave things like line comments.

srikar0896 commented 7 years ago

@seanlip made a PR #3140

rachelwchen commented 7 years ago

I like it a lot! The message looks much friendlier now. I think a little more padding between the message and the bottom of the card will make it look nicer. Lastly, I'm not sure whether the message should align to the left or to the right of the card -- the left alignment feels a little off to me, but that might just be me-- @markhalpin thoughts?

On Wed, Mar 1, 2017 at 12:23 AM, srikar.ch notifications@github.com wrote:

@seanlip https://github.com/seanlip made a PR #3140 https://github.com/oppia/oppia/pull/3140

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/oppia/oppia/issues/3074#issuecomment-283275479, or mute the thread https://github.com/notifications/unsubscribe-auth/ALmJ23z1-FwaR-vVL3exAhpJf_QvKkFLks5rhSscgaJpZM4MC0Ql .

-- Rachel Chen

srikar0896 commented 7 years ago

@rachelwchen image

markhalpin commented 7 years ago

I agree that we want a little more padding between the card and the limit message. I'd say whatever the height is now between the top of the lower case letters and the card, let's make that the space between the card and the top of the "i" circle.

I prefer the left alignment actually, since all the other useful info is at the left (Submit, Form titles, etc.)

srikar0896 commented 7 years ago

@markhalpin @rachelwchen @seanlip what about this? image

srikar0896 commented 7 years ago

@seanlip made a commit #3148 .

markhalpin commented 7 years ago

lgtm. thanks!

rachelwchen commented 7 years ago

Looks good! Thank you.

On Thu, Mar 2, 2017 at 7:31 AM, Mark Halpin notifications@github.com wrote:

lgtm. thanks!

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/oppia/oppia/issues/3074#issuecomment-283685752, or mute the thread https://github.com/notifications/unsubscribe-auth/ALmJ21iMWX1n7ZE0OYzEK2at10U_oF0pks5rhuDGgaJpZM4MC0Ql .

-- Rachel Chen

seanlip commented 7 years ago

So I'm not too worried about the visuals, but I have a question about the text -- is it actually understandable? Would authors know what the "suggested card height" is? Who suggested it, where did this number come from, etc.?

I was thinking that maybe something along the lines of:

"This card is quite long, and students might lose interest. Consider shortening it, or breaking it into two cards."

might be better, but that is quite a long message. @markhalpin @rachelwchen @Arunabh98 @anmolshkl could you please take a look at it and comment from this lens?

rachelwchen commented 7 years ago

@seanlip You're right, I agree. I think the length of your message isn't too bad, actually -- as long as it doesn't exceed two lines.

On a second thought, is there perhaps another word for "card"? I know we refer to it as a card, but would creators (especially first-time creators) know that?

Thanks!

On Thu, Mar 2, 2017 at 6:00 PM Sean Lip notifications@github.com wrote:

So I'm not too worried about the visuals, but I have a question about the text -- is it actually understandable? Would authors know what the "suggested card height" is? Who suggested it, where did this number come from, etc.?

I was thinking that maybe something along the lines of:

"This card is quite long, and students might lose interest. Consider shortening it, or breaking it into two cards."

might be better, but that is quite a long message. @markhalpin https://github.com/markhalpin @rachelwchen https://github.com/rachelwchen @Arunabh98 https://github.com/Arunabh98 @anmolshkl https://github.com/anmolshkl could you take a look at it and comment from this lens?

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/oppia/oppia/issues/3074#issuecomment-283843049, or mute the thread https://github.com/notifications/unsubscribe-auth/ALmJ24DKWrkyqk5xqGe46b7OUof48EjZks5rh3RKgaJpZM4MC0Ql .

-- Rachel Chen Sent from mobile.

seanlip commented 7 years ago

That, I don't know. The context may be sufficient to indicate what the message refers to, though, so I'm fine with "card" unless anyone has a better suggestion.

arunabh98 commented 7 years ago

@seanlip the message looks fine to me. Also I think creators would be able to understand 'card' in this context.

anmolshkl commented 7 years ago

@seanlip I think the message is not "computer-ish" and it conveys the right message! I really liked the suggestion - "consider shortening it, or breaking it into two cards". If the message can be displayed in a way that is neither too glaring nor visually unappealing then I'm absolutely fine with seeing this message (as a creator).

ankita240796 commented 5 years ago

Hi @seanlip, may I take this up using the approach which is discussed on the issue, Thanks!

DubeySandeep commented 5 years ago

Hi @ankita240796, feel free to work on this issue using the suggestion provided in comments above. Thanks! :)

ankita240796 commented 5 years ago

Thanks @DubeySandeep :)