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

[seanlip]

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]

• Do we just want to prompt the creator with above info once or keep forcing to prompt if he still wants a bigger card.
• In case we just want to prompt him, I think showing a simple modal to him with the info is fine.

[seanlip]

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]

@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]

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]

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

[seanlip]

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

[srikar0896]

@seanlip can I proceed on this issue.?

[seanlip]

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]

Ok

[srikar0896]

@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]

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]

Ok

[srikar0896]

@seanlip please suggest the warning message?

[rachelwchen]

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]

@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]

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]

@seanlip made a PR #3140

[rachelwchen]

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]

@rachelwchen

[markhalpin]

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]

@markhalpin @rachelwchen @seanlip what about this?

[srikar0896]

@seanlip made a commit #3148 .

[markhalpin]

lgtm. thanks!

[rachelwchen]

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]

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]

@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]

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]

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

[anmolshkl]

@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]

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

[DubeySandeep]

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

[ankita240796]

Thanks @DubeySandeep :)