Answerbox preload support with multilanguage questions.

Answerbox preload support with multilanguage questions.

von Richard Lobb -
Anzahl Antworten: 0

A user posted the following question on github. 

I want a Answer Box preload support for multilang questions.

I want to organise coding competitions using this plugin. This does support multi language using [this plugin]. But the only problem is it doesnt support answer box preload for those languages.

There is just one "Answer box preload" and i can input prefilled code for just one language there.

Is there any other workaround ? If not, can you please add this feature.

My answer

You can't preload the answerbox on a per-language basis, because the language isn't determined until the user selects a language with the dropdown. Furthermore they might change their mind and switch to a different language at any time. So you need to load the answerbox with specific code whenever the user changes the language in the dropdown. Implementing this properly, with a question-authoring UI, would be a lot of work, requiring a change to the database schema and significant UI complications. This is not warranted for such a fringe use case.

But, yes, there is a workaround.

If you edit a multilanguage question in HTML mode and paste the following script after the question text, you'll have a question that sets the answer box to a "Hello world!" program for C, C++ and Python3 when the user chooses one of those languages with the language-select dropdown. You will have to change the preloads variable to define whatever text you wish to preload for each of the languages you're supporting. Also, note that the script ID (currently "my-unique-id") will have to be different for each question when you have multiple questions on a page, and  the line "const script = document.getElementById("my-unique-id");" will have to be updated accordingly.

<script id="my-unique-id">
    document.addEventListener('DOMContentLoaded', function() {
      // Your per-language answerbox preloads go here:
      const preloads = {
        'c': `#include <stdio.h>
int main() {
    puts("Hello world!");
}
`,
        'cpp': `#include <iostream>
using namespace std;
int main() {
    cout << "Hello world!" << endl;
}
`,
        'python3': `print("Hello world!")
`
      };

      // Find the script element by its ID. NB: If multiple questions on a page,
      // each script needs its own unique id.
      const script = document.getElementById("my-unique-id");
      if (!script) {
        alert("Script not found. Preload aborted.");
        return;
      }

      // Find the question div that encloses this script, and hence
      // the question's language-select dropdown and answer box textarea.
      const formulation = script.closest('div.formulation');
      const langSelect = formulation.querySelector(
        'select.coderunner-lang-select');
      const answerTextarea = formulation.querySelector(
        'textarea.coderunner-answer');

      // Event handler for language changes plugs in preload code.
      langSelect.addEventListener('change', function() {
        if (answerTextarea.value.trim() !== '') {
          alert("Answer box not empty. Preload aborted.");
          return;
        }
        const selectedLang = this.value;
        const preload = preloads[selectedLang];
        const currentUi = answerTextarea.current_ui_wrapper;
        if (currentUi) {
          currentUi.stop();
        }
        answerTextarea.value = preload;
        if (currentUi) {
          currentUi.restart();
        }
      });
    });
</script>