FIXED: Unable to edit some custom Problems in Studio

[ji...@opencraft.com]

Hello,

Our client at the Harvard Kennedy School (epodx.org), have a lot of custom Problem XML in their courses.  They encountered an issue with Studio not letting them save changes to these problems, after we'd upgraded them to Ficus.

We discovered a workaround to this issue, so I'm posting it here, in case anyone else runs into the same issue.

Symptoms

1. When editing a custom problem in Studio, it opens in the Simple Editor, rather than the Advanced Editor.
   
2. Attempts to save changes in the Simple Editor do not work.  Demonstration below:
3. Attempts to switch to the Advanced Editor don't work.
4. Javascript console shows errors like this when you try to Save:
   
   Uncaught DOMException: Failed to execute 'insertBefore' on 'Node': The new child element contains the parent. at http://localhost:8001/static/005593f04b/xmodule/descriptors/js/001-091f58dd32678373423e4deae364e9dd.js:787:45 at Function._.each._.forEach (http://localhost:8001/static/005593f04b/common/js/vendor/underscore.js:153:9) at toXml (http://localhost:8001/static/005593f04b/xmodule/descriptors/js/001-091f58dd32678373423e4deae364e9dd.js:778:23) at http://localhost:8001/static/005593f04b/xmodule/descriptors/js/001-091f58dd32678373423e4deae364e9dd.js:812:43 at Function._.each._.forEach (http://localhost:8001/static/005593f04b/common/js/vendor/underscore.js:153:9) at Function.MarkdownEditingDescriptor.MarkdownEditingDescriptor.markdownToXml (http://localhost:8001/static/005593f04b/xmodule/descriptors/js/001-091f58dd32678373423e4deae364e9dd.js:810:15) at MarkdownEditingDescriptor.MarkdownEditingDescriptor.save (http://localhost:8001/static/005593f04b/xmodule/descriptors/js/001-091f58dd32678373423e4deae364e9dd.js:218:53) at child.getXBlockFieldData (http://localhost:8001/static/005593f04b/js/views/xblock_editor.js:103:35) at child.save (http://localhost:8001/static/005593f04b/js/views/modals/edit_xblock.js:163:39) at HTMLDivElement.dispatch (http://localhost:8001/static/005593f04b/common/js/vendor/jquery.js:4737:27)

   
   

   
   

Workaround

Remove the leading <problem> and ending </problem> tags from the XML given in the Simple Editor, before hitting Save.

For example, if the Problem XML is:

<problem>

  <script type="text/javascript"> 

   (function() { 

    $( ".check-label" ).text("Submit"); 

   })(); 

</script>

  <p>Suppose that you are charged with improving student achievement. Imagine you receive a report that examined data and concluded that students whose teachers get more hours of teacher training do better (in the sense that the students score higher on a national exam).</p><p>The report’s analysis is represented in the graph below. Citing this finding, the authors of the report recommend expanding the teacher training program so more training can be provided to teachers.</p> 

    <p>

    <img src="/static/TeacherTraining.jpg" alt="Teacher Training Data" width="80%" height="80%"/><br /><a href="/static/Long_description_of_data_on_teacher_training_IVcP1.html" style="font-size: 90%" target="_blank">View extended text description</a>

  </p>

  <p><strong>Based on the report’s analysis, would you support the recommendation to expand the teacher training program?</strong></p>

   <multiplechoiceresponse>

    <choicegroup label="Would you support the recommendation to expand the teacher training program?" type="MultipleChoice" show_correctness="never">

      <choice correct="true">Yes <choicehint label="">View the video below to learn more.</choicehint></choice>

      <choice correct="true">No <choicehint label="">View the video below to learn more.</choicehint></choice>

     </choicegroup>

  </multiplechoiceresponse>

</problem>

Once the highlighted lines are removed, saving the problem works again.

Also, it will now allow you to switch to the Advanced Editor, which re-adds these <problem> and </problem> tags, and also moves the <multiplechoiceresponse> tag up above the <script> tag.  And you can Save from the Advanced Editor now too.

So the problem above becomes:

<problem>

<multiplechoiceresponse>

    <p>  </p>

<script type="text/javascript"> 

   (function() { 

    $( ".check-label" ).text("Submit"); 

   })(); 

</script>

<p>Suppose that you are charged with improving student achievement. Imagine you receive a report that examined data and concluded that students whose teachers get more hours of teacher training do better (in the sense that the students score higher on a national exam).</p>

<p>The report’s analysis is represented in the graph below. Citing this finding, the authors of the report recommend expanding the teacher training program so more training can be provided to teachers.</p>

<p>

    <img src="/static/TeacherTraining.jpg" alt="Teacher Training Data" width="80%" height="80%"/><br/><a href="/static/Long_description_of_data_on_teacher_training_IVcP1.html" style="font-size: 90%" target="_blank">View extended text description</a>

  </p>

<p><strong>Based on the report’s analysis, would you support the recommendation to expand the teacher training program?</strong>

</p><choicegroup label="Would you support the recommendation to expand the teacher training program?" type="MultipleChoice" show_correctness="never">

      <choice correct="true">Yes <choicehint label="">View the video below to learn more.</choicehint>

</choice>

      <choice correct="true">No <choicehint label="">View the video below to learn more.</choicehint>

</choice>

     </choicegroup>

  </multiplechoiceresponse>

</problem>

Cheers,

--

Jill

@OpenCraft