Repository: oppia/oppia

Issue:
Allow creators to preview the summary tiles for their activities in the exploration/collection editor settings tab.
We often see cases where exploration titles are too long and get truncated in the library, or where objectives aren't written in a way that look useful to the learner. A possible cause for this is that there's no easy way for creators to preview how their activity looks like to learners in the library or search results.

The aim of this issue is to implement a preview of the activity summary tile in the Settings tab, so that creators can get a sense of the effect of their changes to the exploration metadata. It should be straightforward to reuse the exploration/collection summary tile directive for this, but there is a design question that needs to be solved: where do we put this preview, and how will it be accessed? Once this design question is solved, the implementation should be relatively straightforward.



Discussion:
Adding comments from #2500: let's also try and use this to limit the total number of characters on exploration titles so that they span a maximum of two lines, since three lines of text on the cards looks very cluttered:
![library_card_text](https://cloud.githubusercontent.com/assets/13863393/18736059/6173201a-8051-11e6-834d-b4261f3dc37c.jpg)

We can probably just add the preview somewhere in the exploration metadata section of the Settings tab.

@Nix07 -- would you be up for looking into this?
@seanlip, We can add an extra button on the Controls' box in the Settings, like Preview Summary Tile, which will trigger a modal showing the Summary tile. What you think?
That could work, or you could show it alongside the "details" card -- we
may need to experiment a bit to see what works best. But, for now, feel
free to pick an approach and go with it!

On Monday, January 9, 2017, Nikhil Prakash <notifications@github.com> wrote:

> @seanlip <https://github.com/seanlip>, We can add an extra button on the
> Controls' box in the Settings, like Preview Summary Tile, which will
> trigger a modal showing the Summary tile. What you think?
>
> —
> You are receiving this because you were mentioned.
> Reply to this email directly, view it on GitHub
> <https://github.com/oppia/oppia/issues/2039#issuecomment-271283650>, or mute
> the thread
> <https://github.com/notifications/unsubscribe-auth/AKFeyqveyEXTct3tbygeK4X9FegbqWRdks5rQjWggaJpZM4IwiQX>
> .
>

I tried to implement my approach of using a modal. 
![oppia](https://cloud.githubusercontent.com/assets/22103406/21807881/c7d70a62-d766-11e6-9038-10660dc8d59d.png)
What you think? And where is "details" card, I couldn't find it?
I just meant the top card (the one containing the title, category, etc.)
But the modal looks quite nice, too. The idea of the other suggestion was
so that authors can see the card live-updating as they adjust the settings
text, but maybe this is not so necessary.

Maybe the best thing to do is to check with some exploration authors.
@Arunabh98 @naveenshukla @kefeh @anmolshkl any thoughts?

On Tuesday, January 10, 2017, Nikhil Prakash <notifications@github.com>
wrote:

> I tried to implement my approach of using a modal.
> [image: oppia]
> <https://cloud.githubusercontent.com/assets/22103406/21807881/c7d70a62-d766-11e6-9038-10660dc8d59d.png>
> What you think? And where is "details" card, I couldn't find it?
>
> —
> You are receiving this because you were mentioned.
> Reply to this email directly, view it on GitHub
> <https://github.com/oppia/oppia/issues/2039#issuecomment-271576726>, or mute
> the thread
> <https://github.com/notifications/unsubscribe-auth/AKFeylKpKLznBkGtjw-loAo4qToBvpaUks5rQ4kYgaJpZM4IwiQX>
> .
>

@seanlip What should I do with this issue? No one is responding.
@seanlip @Nix07   Sorry for delay. I think the one with modal is nice. I also think that live updating is not necessary and we can give a little warning below the textboxes in settings that "text is exceeding its limit and card may look cluttered".
@seanlip, the above mentioned approaches might not be a good idea (my personal view). How about limiting the title to two lines and adding  title attribute to the card in library? One site i can think of using this approach is Youtube. 
@himanshu-dixit, what do you mean by "adding title attribute to the card in library"? I'm not sure I fully understand.
Also, /cc @jacobdavis11 @kevinlee12 (as exploration authors) for additional thoughts.
@himanshu-dixit Rather than limiting the title to two lines, its better to give a warning as @naveenshukla said. This would give the user a better control of what he is creating.
With respect to #2500 .
<img width="557" alt="my" src="https://cloud.githubusercontent.com/assets/6849438/21902011/3a36563e-d920-11e6-986f-47acb2312dc3.png">

Oh, I see. So, @himanshu-dixit, what you're saying is: don't show authors a preview summary tile in the exploration editor at all. Instead, take whatever title they supply, truncate it to two lines, and add a tooltip if needed. Is that what you meant?
Yeah, TBH during first time while creating exploration i did have some trouble. I think at this moment we need to make exploration editor simple, and we might be going away from it by adding more customization while creating exploration. BTW youtube also uses title attribute in cards regardless of long or small title.
<img width="773" alt="untitled" src="https://cloud.githubusercontent.com/assets/6849438/21902582/744be04e-d922-11e6-9018-106529c66e19.png">


I suggest showing a warning to the user, after he/she crosses a certain limit. But even if he/she crosses that limit, the idea that @himanshu-dixit is suggesting is good enough.
Here are some thoughts:

- This is essentially a tradeoff between making things look nice for the learner, and making things easy for the creator. The problem with over-long titles is that sometimes the truncated version just doesn't convey enough information (we've had that in the past) since our character limit is pretty short. Having a tooltip mitigates this but is not so nice because it doesn't permit easy browsing.
- One difference between YouTube and the Oppia library is that the former includes images which give a pretty good hint of what the video is going to be like. The latter doesn't, so browsing visually would be harder if the titles were incomplete.
- If we go with the modal option, it would essentially involve adding a single 'preview summary tile' button (or similar) to the settings page. Do you think that would cause confusion on the creator's part? Note that it doesn't add any additional functionality, it just allows authors to see the actual effect of the changes they (can already) make on the settings page.
I like the idea of live loading and I thought something like the following might nudge the creator to make concise titles and objectives. We could stack the exploration tile and the settings like:
![mock](https://cloud.githubusercontent.com/assets/5758256/21908218/b0aa5148-d8c7-11e6-9a00-9b9b8083c475.png)
Note that the text background is of a different color, this should be the case when the creator hovers over the specific field so that they know that they can type into that field. When the mouse goes away from the field, it goes back to "normal" (ie. no grey/background fields visible). When it comes to the title field, the text box will have to automatically "rise" so that a 2 liner can be enforced. 

@seanlip Please give your comments on @kevinlee12 approach. This is a bit similar to google dev-tools, like hovering over the element to see what it represent on the page. 
Hi @Nix07, not exactly, the title and the objective fields and input are entirely moved to the card (the creator types directly onto the card, note the missing title and objective fields on the settings tab).
@kevinlee12 oh! That's a nice idea. The creator can easily edit his/her preview tile properly!
@seanlip I think we should implement this approach. It solves both the problems of making things look nice for the learner and making things easy for the creator. What you think?
I like the idea of having a preview card in the editor, and that should be
enough to nudge people to make concise titles.

Moving the editable settings fields themselves into the card might be a
step too far, if it's not obvious to users exactly what is editable (since
not all parts of the card are, and there are other editable things not
shown in the card). But I'm open to some user testing of the idea.

On Sat, Jan 14, 2017 at 1:55 PM, Nikhil Prakash <notifications@github.com>
wrote:

> @kevinlee12 <https://github.com/kevinlee12> oh! That's a nice idea. The
> user can easily edit his/her preview tile properly!
> @seanlip <https://github.com/seanlip> I think we should implement this
> approach. It solves both the problems of making things look nice for the
> learner and making things easy for the creator. What you think?
>
> —
> You are receiving this because you were mentioned.
> Reply to this email directly, view it on GitHub
> <https://github.com/oppia/oppia/issues/2039#issuecomment-272622500>, or mute
> the thread
> <https://github.com/notifications/unsubscribe-auth/ANF0TL4Eic0vcdhIepg3Sr2BVjGnQmtVks5rSMW3gaJpZM4IwiQX>
> .
>

The bottom text for collection/views/date is a little large and can be moved down, allowing for more space for the text above. Is there a symbol we can use to define collections? 
I also like the idea for a preview card. We may want an exact maximum text count considering we have a definite number where the user's text will break. 

OK. Let's have a preview card, but not have that card be editable. I think that's going to make things harder from a technical perspective, so we should do the simple thing first.

As to where to put it, we could do what @kevinlee12 suggests, or alternatively maybe we could show it on the right-hand side of the "Basic Settings" card and make the text fields there smaller in width. I'm fine with a modal approach, too. I lean towards just implementing either of these, getting it out there, and iterating based on user feedback.

@jblair87 re bottom text, maybe file a separate issue? I think that's a separate thing that would need to be discussed with @markhalpin. Note that collections look different in the library; they have a "fold" at the top left. 
Also, @Nix07, just to check -- are you still taking up this issue? I wanted to make sure, since no one seems to be assigned to it.
@seanlip I'm taking. I just didn't assign myself. Will be responding with the codes within 1-2 days(busy with the college stuffs right now!).
Check this out, @seanlip 
![oppia](https://cloud.githubusercontent.com/assets/22103406/22064550/1abc42d0-ddaa-11e6-99a8-44c9a3febdd6.png)
![oppia2](https://cloud.githubusercontent.com/assets/22103406/22064553/1ef7e7f0-ddaa-11e6-9e60-c48b67085db4.png)


Thanks, @Nix07! This looks fine to me, except that the objective section should show the objective, and not "This exploration is private" etc. Could you do a PR?
(NB: there's some prior work in #2941 but it needs to be redone, Angular-style.)
This is looking great. @jblair87 , let's leave the bottom text alone for the moment. Thanks! 
@nix07 this looks awesome

Get Outlook for iOS




On Sat, Jan 21, 2017 at 9:12 PM -0500, "Mark Halpin" <notifications@github.com> wrote:












This is looking great. @jblair87 , let's leave the bottom text alone for the moment. Thanks!



—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub, or mute the thread.


  
  










Hi @Anthony-Alridge -- would you like to take this one? (It's a bit more difficult than the previous starter projects, but I think it would be good for getting more experience with the editor frontend.)
Hi @Anthony-Alridge, I noticed you're taking up #2981, so, just a quick check -- are you still planning to work on this? Thanks!
Hi @seanlip, sorry I must have missed the notification for this one, if no one takes this up before I finish #2981 then yes I'll be totally up for working on this. Thanks.
Hi @seanlip sorry this is late I've been busy with uni stuff. Before I get started do you have a preference as to which approach to take. If not I'll go with a modal approach and see how that turns out. 
I mildly prefer the version where it's on the right of the basic settings card (i.e. no modal), but if the modal version is easier then please go ahead with that. Thanks!
Hi @seanlip I think I'll go with the modal view first then, it may be easier, but I'll be happy to experiment with different approaches.  Also I'm trying to use the exploration-summary-tile directive but I'm a little confused as to where to get the information (title, id, backround-img url etc.) from. Is there a way to retrieve this information from one of the services in the SettingsTab.js file? It'd be great if you could help me with that, once I figure that I think it should be ready. Thanks.
Try searching the codebase for existing usage of the exploration-summary-tile -- that should give you an idea of how to pass data into it. If you're asking where to get that data from, I think most of it should be available already within the [SettingsTab.js controller](https://github.com/oppia/oppia/blob/develop/core/templates/dev/head/pages/exploration_editor/settings_tab/SettingsTab.js)? It's the same stuff that the user is editing elsewhere on the page, for the most part -- you can look at where the info is coming from in the SettingsTab and use those same data sources. Also take a look at how other modals are implemented throughout the site, and try to follow existing patterns.

Let me know if this answers your question, or if I've misinterpreted it. Thanks!
Yh I can see where the information that the user edits (title, objective, category) comes from. I think I'm fine accessing those, but I don't know where to get the additional data such as last-updated and ratings. In all the other implementation's of exploration-summary-title the data seems to be pulled from a backend services (e.g. ReadOnlyCollectionBackendApiService in the collection_player, or otherwise retrieving a list of explorations such as in the library). In other words I can't figure out which data source in the SettingsTab.js controller give's me the rest of the information on the exploration. 
I may be missing something obvious here, in any case I'll keep trying to figure it out. Thanks. 
Just to clarify this is the information I'm looking for.
     <exploration-summary-tile exploration-id=""
                              exploration-title="explorationTitleService.displayed"
                              last-updated-msec=""
                              objective="explorationObjectiveService.displayed"
                              category="explorationCategoryService.displayed"
                              ratings=""
                              num-views=""
                              thumbnail-icon-url=""
                              thumbnail-bg-color=""
                              is-community-owned=""
                              class="protractor-test-exp-summary-tile">
        <exploration-summary-tile/>

Ah, I see. I don't think last updated and ratings are relevant for this
view, though. Could we modify the directive template to handle this case
appropriately (I.e. when they are not passed in)?

On Wednesday, February 8, 2017, Anthony-Alridge <notifications@github.com>
wrote:

> Just to clarify this is the information I'm looking for.
>
> —
> You are receiving this because you were mentioned.
> Reply to this email directly, view it on GitHub
> <https://github.com/oppia/oppia/issues/2039#issuecomment-278494290>, or mute
> the thread
> <https://github.com/notifications/unsubscribe-auth/AKFeyj-_jxI-7mRqR3VDIuCSKkd5U7ahks5rakyjgaJpZM4IwiQX>
> .
>

Ah that makes things easier @seanlip, yh I can look into that, at the moment it works without the values but displays unhelpful information (below). Is this undesirable from a user perspective, if so then I'll see about modifying the directive so that it doesn't display the information.  Also, overall the modal is working fine but I'm having trouble with getting the background image url  and colour (at the moment the one's displayed I've just hard coded into the SettingsTab.js controller to check the other things work, of course this is undesirable).  Similar to the statistics it seems that in other file's this information was retrieved from the back-end. I'm not entirely sure which service I can use, I'll keep looking around but if you know of one which gets exploration data by id for example that would save some time. 
![oppia-summary-tile](https://cloud.githubusercontent.com/assets/16727074/22848558/50246c7c-efed-11e6-8041-29d0c6abab72.PNG)

Yep, it is undesirable to have NaN, I think. So I would recommend modifying it appropriately -- or actually, maybe a better way is to replace the text with a long dash or grey it out or something, so that the basic layout is still preserved, just with placeholders for the values.

Not sure offhand re background colour -- I think you'll need to dig to see where the library page gets it from. I _think_ there's a global constant somewhere mapping categories to color names + icons. You should be able to use that without an extra backend fetch, since you already have the category.

Hope that helps!
Hi @seanlip, that helped a lot thanks. I got a chance to work on it today and everything seems to be working fine.  Here's what it looks like with the grayed out text, is this okay? Also, I found the constant you mentioned in the feconf.py file (it was only needed in the back-end up till now), I've added it to the global constants, is that alright?
![oppia-summary-tile](https://cloud.githubusercontent.com/assets/16727074/22907187/d5d610ba-f23f-11e6-9a1f-839484a2fb7f.PNG)

Thanks, @Anthony-Alridge! Looping in @jaredsilver and @jblair87 for UI feedback.

Re the constant, let's take a look at it during PR review. Can you send in a PR and assign it to me for review?

Thanks!
@Anthony-Alridge I like this as it gives the user more perspective if their title/objective is too long. will the objective popover work in the preview? I am also not sure if the "preview summary" button should be green, or the only button in that area. Green indicates "go", " complete".  Maybe there should be a save summary button next to the preview summary button
@seanlip @jaredsilver 
To add to @jblair87's comment: what do we think of having two buttons here -- one would be a secondary button (the same style as the current "Close" button), but instead it would say _Return to Editor_, and the other would be a primary button to its right (the same style as the "Preview Summary" button) that says _Publish_ and would queue up the publish modal?

Resolving patch:
diff --git a/core/controllers/base.py b/core/controllers/base.py
--- a/core/controllers/base.py
+++ b/core/controllers/base.py
@@ -302,7 +302,10 @@ def render_template(
             'BEFORE_END_HEAD_TAG_HOOK': jinja2.utils.Markup(
                 BEFORE_END_HEAD_TAG_HOOK.value),
             'CAN_SEND_ANALYTICS_EVENTS': feconf.CAN_SEND_ANALYTICS_EVENTS,
+            'CATEGORIES_TO_COLORS': feconf.CATEGORIES_TO_COLORS,
             'DEFAULT_LANGUAGE_CODE': feconf.ALL_LANGUAGE_CODES[0]['code'],
+            'DEFAULT_CATEGORY_ICON': feconf.DEFAULT_THUMBNAIL_ICON,
+            'DEFAULT_COLOR': feconf.DEFAULT_COLOR,
             'DEV_MODE': feconf.DEV_MODE,
             'MINIFICATION': feconf.IS_MINIFIED,
             'DOMAIN_URL': '%s://%s' % (scheme, netloc),
@@ -350,6 +353,7 @@ def render_template(
 
         if redirect_url_on_logout is None:
             redirect_url_on_logout = self.request.uri
+
         if self.user_id:
             values['login_url'] = None
             values['logout_url'] = (


Test patch:
diff --git a/core/tests/protractor/editorAndPlayer.js b/core/tests/protractor/editorAndPlayer.js
--- a/core/tests/protractor/editorAndPlayer.js
+++ b/core/tests/protractor/editorAndPlayer.js
@@ -205,6 +205,7 @@ describe('Full exploration editor', function() {
       editor.setTitle('Testing multiple rules');
       editor.setCategory('Answer Groups');
       editor.setObjective('To assess happiness.');
+      editor.openAndClosePreviewSummaryTile();
       editor.saveChanges();
       workflow.publishExploration();
 
diff --git a/core/tests/protractor_utils/editor.js b/core/tests/protractor_utils/editor.js
--- a/core/tests/protractor_utils/editor.js
+++ b/core/tests/protractor_utils/editor.js
@@ -1066,6 +1066,19 @@ var enableFallbacks = function() {
   });
 };
 
+var openAndClosePreviewSummaryTile = function() {
+  runFromSettingsTab(function() {
+    element(by.css('.protractor-test-open-preview-summary-modal')).click();
+    general.waitForSystem();
+    expect(element(by.css(
+      '.protractor-test-exploration-summary-tile')).isPresent()).toBeTruthy();
+    element(by.css('.protractor-test-close-preview-summary-modal')).click();
+    general.waitForSystem();
+    expect(element(by.css(
+      '.protractor-test-exploration-summary-tile')).isPresent()).toBeFalsy();
+  });
+};
+
 // CONTROLS
 
 var saveChanges = function(commitMessage) {
@@ -1445,6 +1458,7 @@ exports.setFirstState = setFirstState;
 exports.enableParameters = enableParameters;
 exports.enableGadgets = enableGadgets;
 exports.enableFallbacks = enableFallbacks;
+exports.openAndClosePreviewSummaryTile = openAndClosePreviewSummaryTile;
 
 exports.saveChanges = saveChanges;
 exports.discardChanges = discardChanges;