Updates and additional features for select toggle functionality by vqum · Pull Request #1189 · RunestoneInteractive/RunestoneComponents

vqum · 2021-04-28T20:21:41Z

Apologies that this looks like a lot of changes, but they are all related to each other and involve the same files, so I figured that they should reasonably be moved together.

Overview of changes:

Relabel "Parsons" as "Mixed-Up Code" and "Active Code" as "Write Code"
Move preview panel buttons from the bottom to the top
Add toggle option "lock"
Add toggle option "transfer"

1. Relabel "Parsons" as "Mixed-Up Code" and "Active Code" as "Write Code"
A group of U-M students conducted user testing using the select toggle functionality, and one of their findings was that the question type label within the toggle dropdown menu should match the wording that has been used elsewhere in Runestone textbooks.

2. Move preview panel buttons from the bottom to the top
Another finding from the above mentioned user testing was that the toggle preview panel's buttons being at the bottom made them difficult to locate. This was especially true for long problems, such as Parsons problems whose source and answer spaces become stacked vertically resulting in the need for scrolling to get to the bottom and see that there are actionable buttons. Additionally, the buttons at the bottom could be obscured by the privacy policy banner.

3. Add toggle option "lock"
@barbarer asked for the ability to require that students try to solve a specific question (in other words, only that specified question would be graded) but that the other questions would be made available for the students to use as reference in working on the specified question. For achieve this, the option "lock" has been made available on the :toggle: setting. When applied, text is added to the first option on the dropdown menu describing that only that question would be graded, and the "Select this Problem" button is removed from the preview panel. This results in a select toggle question in which the student is able to pick other questions options from the dropdown menu to preview them, but is not able to set those other questions nor have the grading table be updated.

@bnmnetp The question about displaying a question in a separate window was related to this - some questions like Parsons problems take up too much screen space in the preview panel, obscuring the current question underneath. For a student to be able to work on the current question and be able to see the Parsons problem as a reference simultaneously, do you think it would be possible to implement something like a button "Open Preview in Separate Window" on the preview panel that accomplishes this?

4. Add toggle option "transfer"
Option "transfer" made available on the :toggle: setting. When applied, and when the current question is of type Parsons and the dropdown-selected question is of type active code, the button "Transfer Mixed-Up Code to Write Code" is added to the preview panel. Clicking this button extracts the text with indentations as it's currently set in the answer space of the Parsons question and pastes it into the active code. Any preexisting code within the write code is overwritten.

bnmnetp · 2021-04-28T21:36:47Z

Thanks Vincent,

A few of comments. Hopefully @barbarer will join in as well.

I think "Write code" and "mixed up code" problems are local terminology at UMich. I've never in my life referred to an activecode problem as a "write code" problem nor have I heard anyone but @barbarer use that term. Maybe @bhoffman0 ?? I always call parsons problems "parsons problems".
So maybe there is a way we can configure that similar to the localization we do for other elements? I could see that there might be other more preferred labels for the use case of :toggle: lock such as Hint 1, Hint 2, Hint 3 rather than labeling them with their ids and question types?? So maybe a parallel option of :labels: would all the author to call the choices whatever they want, with the fallback of just using the type and label??

I'm 100% against popups. Lots of browsers prevent them by default and they count against you in all sorts of ways by sites that try to grade you on privacy and efficiency. I can only imagine all the bug reports we would get when people click the button and no window pops up because their browser prevented it. Its kind of like the issue we have with timed exams and navigating away from the page. We are doing it for a good reason but browsers are doing everything they can to prevent us from being nice because it is most often used for evil.

Maybe we can update the preview window to be more like the modal reveal that is resizable and moveable? Or maybe we should just position it full width in the DOM above or below the actual question. We can keep the shadowing and background we have now to set it apart but just make it larger and change its position?

The transfer idea is super cool. Love it. As well as the option.

barbarer · 2021-04-30T20:39:00Z

In our ebooks we use the terms Mixed-up code (not Parsons) so I like the idea of using :labels: to provide a name or by default use the type and divid.

We are talking about different ways to handle popping up the Parsons when the student is struggling while writing code. One way is to make the preview panel bigger, but we also want people to be able to look at the Parsons while writing the code. We could also change the Parsons problem to a single column format when the width is smaller.

…into master

vqum · 2021-05-11T22:40:13Z

I've added labels as a setting to :toggle:, but I'm encountering an issue that including any spaces within this string seems to result in the text being cut off, for example:
:toggle: labels{parsonsexample1, parsonsexample2, activecode1} results in the reading in of labels{parsonsexample1,
while
:toggle: labels{parsonsexample1,parsonsexample2,activecode1} results in the reading in of labels{parsonsexample1,parsonsexample2,activecode1}
This seems to be occurring before any of the JavaScript code that I've written because adding console.log to output either of these values for toggleOptions produces only the section of text before the first space detected within the text

Any ideas why it might be doing this and whether I could resolve this?

Additionally, for the transfer button, I've relabeled it to display as "Transfer Parsons Mixed-Up Code to Active Write Code" as an attempt at compromise, but I don't like how wide that makes the button itself. I welcome any ideas for this as well.

barbarer · 2021-05-12T12:34:55Z

Just label it "Transfer Solution" they will figure it out. Dr. Barbara Ericson Assistant Professor, School of Information University of Michigan

…

On Tue, May 11, 2021 at 6:40 PM vqum ***@***.***> wrote: I've added labels as a setting to :toggle:, but I'm encountering an issue that including any spaces within this string seems to result in the text being cut off, for example: :toggle: labels{parsonsexample1, parsonsexample2, activecode1} results in the reading in of labels{parsonsexample1, while :toggle: labels{parsonsexample1,parsonsexample2,activecode1} results in the reading in of labels{parsonsexample1,parsonsexample2,activecode1} This seems to be occurring before any of the JavaScript code that I've written because adding console.log to output either of these values for toggleOptions produces only the section of text before the first space detected within the text [image: image] <https://user-images.githubusercontent.com/40499850/117893049-b01dbc80-b287-11eb-9cbe-0c2565db0859.png> Any ideas why it might be doing this and whether I could resolve this? Additionally, for the transfer button, I've relabeled it to display as "Transfer Parsons Mixed-Up Code to Active Write Code" as an attempt at compromise, but I don't like how wide that makes the button itself. I welcome any ideas for this as well. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#1189 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AKOZ7M2HM4R2HM4B4TEWCB3TNGW6DANCNFSM43XYXJ7A> .

bnmnetp · 2021-05-12T14:12:03Z

runestone/selectquestion/js/selectone.js

+                var toggleLabels;
+                if (toggleOptions.includes("labels{")) {
+                    toggleLabels = toggleOptions.slice(toggleOptions.indexOf("labels{") + 7, toggleOptions.indexOf("}")).split(",");
+                    toggleOptions = toggleOptions.slice(0, toggleOptions.indexOf(",labels{"));


I think this is your problem. You are slicing from the beginning of the string to labels.

If I have time later I can try to pull and debug in the browser but this seems like the most likely culprit.

I think the cut off occurs before it gets to this point. Even without including labels, the presence of a space seems to cause the text following that space to be dropped:

bnmnetp · 2021-05-12T17:44:01Z

That does not make sense. Have you stepped through it in the debugger?

bnmnetp · 2021-05-12T18:21:28Z

Have you looked at the generated html to make sure that all of the options are part of the page?

bnmnetp · 2021-05-12T18:26:14Z

We have lots of other places where we provide a list of things in a directives.unchanged. Seee the :include: option in activecode for example. There we strip out the comas before generating the html.

bnmnetp · 2021-05-12T18:44:44Z

Actually I just pulled it down and I think you are just missing quotes around your list. I checked the html that was built and here is what I see:

<div class="runestone alert alert-warning sqcontainer">
                    <div data-component="selectquestion" id=dynamic_toggle_1 data-questionlist='over_ac_example1, morning' data-toggle=true data-toggleoptions=Example1, Example2>
                        <p>Loading ...</p>
                    </div>

In this case the parser to get the data element is only going to see Example1, any attribute value that has a space in it must be quoted.

vqum · 2021-05-13T22:16:45Z

Thanks Brad. The quotations in selectone.py have now been escape keyed so that it sends over the entirety of the text including spaces:

Leading and trailing spaces in the labels are also trimmed:

bnmnetp · 2021-05-15T23:04:03Z

@vqum

I like how you have it working so that it defaults correctly if you leave one label blank!

I don't think I like the syntax of the :toggle: option, I think it would be better to break it up into :toggletype: and :togglelabels: I think we may be asking for trouble as bootstrap uses data-toggle for several things and I do not want to conflict. Also I think it is just more complicated for authors to use the one option for multiple things...

It looks like there is one minor conflict with the main branch. Can you check and resolve it?

vqum · 2021-05-20T05:36:22Z

Separated into :toggle: and :togglelabels:, with the presence of either (or both) causing the select to become a toggle question. The text input into :toggle: is passed into the data-toggleoptions attribute to avoid the bootstrap conflict.

This is in conjunction with RunestoneServer pull request RunestoneInteractive/RunestoneServer#1656 to update ajax.py get_question_source accordingly.

I believe I also resolved the conflict with the main branch.

I tested the following cases which use preexisting questions in CSAwesome, and all of them rendered the question as expected:

only :toggle: empty, which renders a select toggle question with no additional settings

.. selectquestion:: toggleselectpreexisting
    :fromid: ch8ex5muc, ch8Ex5q, qalm_5
    :toggle:

only :togglelabels: empty, which renders a select toggle question with no additional settings

.. selectquestion:: toggleselectpreexisting2
    :fromid: ch8ex5muc, ch8Ex5q, qalm_5
    :togglelabels:

both :toggle: empty and :togglelabels: empty, which renders a select toggle question with no additional settings

.. selectquestion:: toggleselectpreexisting3
    :fromid: ch8ex5muc, ch8Ex5q, qalm_5
    :toggle:
    :togglelabels:

:toggle: transfer, which renders a select toggle question allowing transfer of Parsons to active code

.. selectquestion:: toggleselectpreexisting4
    :fromid: ch8ex5muc, ch8Ex5q, qalm_5
    :toggle: transfer

:toggle: lock, which renders a select toggle question preventing switching from the 1st problem in the list

.. selectquestion:: toggleselectpreexisting5
    :fromid: ch8ex5muc, ch8Ex5q, qalm_5
    :toggle: lock

:togglelabels: Mixed-Up Code , , Multiple Choice, which renders a select toggle question replacing the dropdown menu options accordingly with the 2nd option defaulting

.. selectquestion:: toggleselectpreexisting6
    :fromid: ch8ex5muc, ch8Ex5q, qalm_5
    :togglelabels: Mixed-Up Code  ,   ,   Multiple Choice

both :toggle: empty and :togglelabels: Mixed-Up Code , , , which renders a select toggle question replacing the dropdown menu options accordingly with the 2nd and 3rd options defaulting

.. selectquestion:: toggleselectpreexisting7
    :fromid: ch8ex5muc, ch8Ex5q, qalm_5
    :toggle:
    :togglelabels: Mixed-Up Code  ,   ,

both :toggle: transfer and :togglelabels: Mixed-Up Code, which renders a select toggle question allowing transfer of Parsons to active code and replacing the dropdown menu options accordingly with the 2nd and 3rd options defaulting

.. selectquestion:: toggleselectpreexisting8
    :fromid: ch8ex5muc, ch8Ex5q, qalm_5
    :toggle: transfer
    :togglelabels: Mixed-Up Code

both :toggle: lock and :togglelabels: ,, Multiple Choice, which renders a select toggle question preventing switching from the 1st problem and replacing the dropdown menu options accordingly with the 1st and 2nd options defaulting

.. selectquestion:: toggleselectpreexisting9
    :fromid: ch8ex5muc, ch8Ex5q, qalm_5
    :toggle: lock
    :togglelabels: ,,   Multiple Choice

vqum · 2021-05-21T21:15:23Z

For this conflict

I simply want to replace component-preview with toggle-preview, and I'm not sure why Git has highlighted this as a conflict.

After I click 'Mark as Resolved', am I supposed to click 'Commit merge'? I don't want to accidentally preemptively merge my code into the master if that's what that button will do.

Besides that, this should be good to go at least on my end.

bnmnetp · 2021-06-10T21:38:08Z

Its because git has decided that someone else changed that line. That can happen when others are also making changes to the same file.

I can fix the conflict. I see now that you want it to be toggle-preview

vqum and others added 4 commits April 28, 2021 15:12

updates and additional features for toggle select

de09b1e

add comments to selectone.js

1797a8b

fix issue with buttons not resetting on preview panel

6d3ce86

Merge branch 'master' into master

286da09

vqum added 2 commits May 11, 2021 15:48

add labels option

5b252f3

Merge branch 'master' of https://github.com/vqum/RunestoneComponents …

041e989

…into master

bnmnetp reviewed May 12, 2021

View reviewed changes

vqum added 2 commits May 12, 2021 11:20

switch split with replace so options following labels are included

fe76001

fix issue of error when not including labels in toggle options

5d968b2

handle spaces and trim excess spaces

b2a8b90

updates to select toggle syntax

2678110

vqum mentioned this pull request May 20, 2021

Update ajax.py for select toggle changes RunestoneInteractive/RunestoneServer#1656

Merged

resolve conflict

b235e8d

Merge branch 'master' into master

e328860

bnmnetp merged commit 20c0f01 into RunestoneInteractive:master Jun 10, 2021

Uh oh!

Conversation

vqum commented Apr 28, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

bnmnetp commented Apr 28, 2021

Uh oh!

barbarer commented Apr 30, 2021

Uh oh!

vqum commented May 11, 2021

Uh oh!

barbarer commented May 12, 2021 via email

Uh oh!

bnmnetp May 12, 2021

Choose a reason for hiding this comment

Uh oh!

vqum May 12, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

bnmnetp commented May 12, 2021

Uh oh!

bnmnetp commented May 12, 2021

Uh oh!

bnmnetp commented May 12, 2021

Uh oh!

bnmnetp commented May 12, 2021

Uh oh!

vqum commented May 13, 2021

Uh oh!

bnmnetp commented May 15, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

vqum commented May 20, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

vqum commented May 21, 2021

Uh oh!

bnmnetp commented Jun 10, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

vqum commented Apr 28, 2021 •

edited

Loading

vqum May 12, 2021 •

edited

Loading

bnmnetp commented May 15, 2021 •

edited

Loading

vqum commented May 20, 2021 •

edited

Loading

bnmnetp commented Jun 10, 2021 •

edited

Loading