[Draft PR] Select question :toggle: functionality for debugging active code "Save & Run" button

[vqum]

This is a draft pull request to take a look into why active code questions included in select :toggle: are rendering with "Run" button instead of "Save & Run" button.

This functionality was programmed to address https://github.com/RunestoneInteractive/rs/issues/78

---

.rst syntax for a select :toggle: question using the programming contained within this pull request would look something like this:

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

where the text following the :toggle: flag can either be

• populated with a question ID from the :fromid: list so that this specified question will be rendered first
• left empty so that the first question rendered is randomly selected from the :fromid: list

---

Changed files are:

• selectquestion/selectone.py
  • added data attributes of toggle and toggle_first to handle the expected .rst syntax
• selectquestion/js/selectone.js
  • check for toggle data attribute in select question
  • create preview div with buttons "Close Preview" and "Select this Problem"
  • create dropdown menu using :fromid: question list
  • dropdown menu onchange renders question within preview div using function togglePreview()
  • "Select this Problem" renders question within page and updates grader to use the selected question function toggleSet()

---

These changes come in conjunction with changes within RunestoneServer https://github.com/RunestoneInteractive/RunestoneServer/pull/1604:

• controllers/ajax.py
  • add toggle_first handling to the get_question_source function that is called within selectone.js
• controllers/admin.py
  • change htmlsrc() authentication from require instructor status to require login so that a student account can access this function that is used in :toggle: programming

[vqum]

Sample problems for testing

If can access CSAwesome questions, then this might be simplest

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

where ch8Ex5q is the active code problem.

---

If need to write separate questions, then can use this

.. parsonsprob:: testquestion_pr
 
    Place the lines of code in the correct order to log a summation.
    -----
    var x;
    =====
    var y;
    =====
    x = 5;
    =====
    y = 7;
    =====
    console.log(x + y);

.. activecode:: testquestion_ac
 
    Write a piece of code that will log the sum of two variables, one with value of 5 and the other with value of 7.
    ~~~~

.. selectquestion:: toggleselectcustom
    :fromid: testquestion_pr, testquestion_ac
    :toggle:

[bnmnetp]

Hi Vincent,

• @barbarer

1. The code is saving and restoring for me. -- I tried it with a simple Python program, I can try a Java program to see if that is different.
2. The selectedQuestion is not getting updated in the database. the variable selectedQuestion is undefined when it is sent to update_selected_question
3. If you don't use the first question in the :fromid: list as the parameter to :toggle: things behave badly. The select box dropdown doesn't show what is selected and the preview doesn't close when you select a question. Maybe :toggle: should just be a flag and the default behavior is to show the first thing on the :fromid: list.
4. If a student selects a different question than the default should their last selection be restored when they refresh the page? I think that is what I would expect to happen as a student.???

[bnmnetp]

Vincent,

To be clear about the "Save & Run" that is a separate and cosmetic issue. The button is changed from Run to Save & Run by the login event. I will look into updating the renderComponent or Activecode itself to find another way to trigger that change.

The main thing for me was that I could verify that it was saving the run to the database and that clicking on the Load History button did properly restore the code.

[vqum]

2. The selectedQuestion is not getting updated in the database. the variable selectedQuestion is undefined when it is sent to update_selected_question

Could you share what error messages you see regarding this? I don't think I've had this issue come up in any of my testing, but I will double check.

---

3. If you don't use the first question in the :fromid: list as the parameter to :toggle: things behave badly. The select box dropdown doesn't show what is selected and the preview doesn't close when you select a question. Maybe :toggle: should just be a flag and the default behavior is to show the first thing on the :fromid: list.

We will proceed with initially displaying the first question in the :fromid: list. This will remove the option of displaying a random one from the list as the initial question like in the default function of select, but we can't think of a particular case where random initial is all that useful to preserve this function. If any use cases are thought of, then I suppose we can built this back in later.

---

4. If a student selects a different question than the default should their last selection be restored when they refresh the page? I think that is what I would expect to happen as a student.???

Yes, this does seem like something to include. I will look into programming this.

[bnmnetp]

For point 2, I'm not getting any error message, but the server is receiving undefined, and when I set a breakpoint in the Javascript debugger I can see that the parameter has the value undefined. Just looking at the code it seems like it should be defined, but there may be some effect from the async function that is causing this.

[vqum]

I think the update function seems to be working for me on my local server when I try it:

Starting from question qalm_5 and switching to ch8ex5muc

Console logs including request and response

ajax.py update_selected_question() prints

Instructor grading pane displays ch8ex5muc for this student for this assignment

---

However, strangely the student submitted response (1st image below) does not seem to match what is displayed on the grading pane (2nd image below) - the bottom 3 lines are different

[vqum]

Pushed changes for error analysis.

Updated selectone.py as well as function update_selected_question in RunestoneServer ajax.py (https://github.com/RunestoneInteractive/RunestoneServer/pull/1604) to revert :toggle: to a flag and use first question in the :fromid: list to be the first rendered question.

In selectone.js, moved functions getToggleSrc, togglePreview, and toggleSet into the Selectone class ahead of adding a new variable that would store student toggle status - if student had toggled to a different question, then render that question upon returning to the assignment. This is similar to how parsons.js uses this.hasSolved variable.

Errors associated with moving the functions into the class: Clicking option in toggle dropdown menu is supposed to trigger function togglePreview, but error says that it is not a function. Could this be related to how the function is being added to the event listener, or that it's async, or that it's now within the class?

[vqum]

Appending .bind(this) to the function did resolve that issue, thanks.

For storing the question that the student has switched to and rendering that question first upon returning to the assignment, it seems like setting a variable on this when making the switch then trying to get it upon next page load is insufficient because the value is not preserved beyond page change.

I'm seeing that parsons.js uses a few functions to store and retrieve such data.

Should a similar approach be taken for this toggle select, or could there be another way to set and store the variable to be retrieved at next page load? Could it maybe be done through Python by adding another line of code to update_selected_question in ajax.py?

[bnmnetp]

Vincent,

The last selection should be preserved in the database. So when you make the api call to get_question_source it should always return the last selection by the student.

[vqum]

My concern is whether any original functionality of selectquestion may have been inadvertently broken by my changes. Do the checks include selectquestion test cases? If there are and if they have not been impacted, then I think it is good to go. If not, then I can try to run some on my side.

[bnmnetp]

I have tested it out on all my test cases and exams for regular select question and everything appears to be working just fine.