Week 5–6 at CircuitVerse — Google Summer of Code 2024

It was around creating question from the moderators POV in the UI as well as integrating it with the backend. In the navbar, an option is added to allow only moderators and admins to add questions (it will be visible only to moderators and the admins)

      <% if user_signed_in? && current_user.question_bank_moderator %>
      <li class="nav-item px-1">
        <a class="nav-link navbar-item navbar-text" href="#" 
onclick="redirectToAddQuestion()"><%= t("layout.link_to_add_questions") %>
</a>
      </li>
      <% end %>

Whenever the moderator clicks on that Add question button, a form to add questions will open where user can add questions along with circuit bolierplate and testbench data (for checking from end user side when he/she attempts that question). The UI is shown below. It redirects to the path /questions/new/:question_id. Here question_id is a random unique string which is generated with the help of ShortUniqueID package

Here Statement is a markdown which is created with the help of SimpleMDE Markdown editor. The following code snippets converts the input into a markdown editor.

const simplemde = new SimpleMDE({ element: 
document.getElementById("markdown-editor") })

In this page, at first it has a Hyperlink named Create Circuit boilerPlate and Test Data. On clicking, it will redirect to /simulator?question_id=:qid and simulator page will open which will allow moderators to add circuit boilerplate and testbench data.

How this page is different from normal simulator page?

When the moderator clicks on the hyperlink Create Circuit boilerplate and Test data, we will store the question_id from the url parameter in localstorage as and its value as an empty string. The value of other fields namely heading, statement etc are also stored in localstorage.

Now when the moderator navigates to the simulator page to add questions, we will check whether the value in the query params (question_id) exists as a key in localstorage or not. If it exists we will render the corresponding value which will be the empty string initially. When the moderator clicks on the save button on the top right(which will be visible only when the question id in query params is there in the localstorage) after adding circuit and the testBench Data, then value of the localstorage corresponding to the question_id key will be the circuitData(including circuit boilerplate and testBench Data). So next time when the moderator visits the simulator page again, he/she will not have to remake the circuit boilerplate and testBench Data again. In this way the progress is saved.

The setTimeout function in setup.js is modified to added one additional if block to handle the above scenario.

const urlParams = new URLSearchParams(window.location.search);
const questionId = urlParams.get('question_id')
if (window.location.pathname.startsWith("/simulator") && questionId && 
localStorage.getItem(questionId)) {
            load(JSON.parse(localStorage.getItem(questionId)));
        } 

Here load method (already defined) is used to load the circuit boilerplate and test data. Following function triggers when the Save button in simulator page is clicked to save data in the localStorage.

document.getElementById('saveButton').addEventListener('click', ()=>{
    const urlParams = new URLSearchParams(window.location.search);
    const question_id = urlParams.get('question_id');
 
    if (question_id) {
        let fl = 1;
        const data = generateSaveData("Untitled", fl);
        const localStorageKey = `${question_id}`;
        localStorage.setItem(localStorageKey, data);
        alert("Circuit boilerplate and test data saved");
    } else {
        alert("Error: Something went wrong! Try again");
    }
 
})

Category and difficulty level are the dropdowns. Here category is fetched from the database(logic gates, combinational circuit, sequential circuit etc. ) and difficulty level is an enum(easy, medium, hard, expert)

Pull request can be found here
Demo can be found here: