Problem Builder XBlock: Playing around

Hello everyone!

I’m trying to understand how Problem Builder XBlock works, and I’m playing around with the code in devstack (juniper.master).

Currently I’m trying to simplify it for a simple scenario where I use just one component. Hope you can help me manage to perform two things:

  1. I’m trying to change the text in the header that lets you access to the Editing View (see screenshot)

For instance, change the text “This block contains …” and “VIEW” text in the button.

  1. When editing the components, I just want to add one component, not multiple.

For instance, remove the components with the red cross.

Thanks for your help!

Hi @Joan_Rodriguez

That is not actually part of problem builder; it’s built into Studio. As such, you can’t really change it. What are you trying to do?

You would need to modify this part of the code. You can return different NestedXBlockSpec objects to show different options. If you return a NestedXBlockSpec with single_instance=True, it will only allow adding one component (of that type).

Hi @braden, and thanks for your reply.

With question 1 I was trying to locate the piece of code that define those texts, and find out if it was part of Problem Builder. Now I know, thanks.

Your answer to question 2 allowed me to do the trick with the NestedXblock definition.

However, do you think is it posible to limit the number of xblocks of the same type that appear in a Unit? Let’s say that the author created an xblock in a Unit, I want avoid creating more xblocks of that type in that unit. I need that because my xblock’s javascript variables get overriden when having more than one copy of my xblock in the page. Maybe there is a workaround that allows for having two xblocks running isolated js code, but I can’t figure it out. Hence, when the user tries to create a new xblock (and there is already one in the unit) I want to alert (may be with a pop up) that only one xblock of that type can be created. Then I would delete it (Also don’t know how to do it from python or js).

Who would you address this problem?

Thanks and best wishes

If I were you, I would focus on this core issue (which I would consider a bug) rather than trying to limit the number of XBlocks on the page.

Your XBlock JavaScript should generally look like this:

function MyXBlock(runtime, element, init_args) {

    // Remove jQuery wrapper if present
    element = element instanceof Element ? element : element[0];

    // State of the XBlock; get from init_args
    let someStateVariable = true;
    // Handler URLs and other useful things
    const someHandlerUrl = runtime.handlerUrl(element, 'some_handler');

    // Code here to initialize the XBlock

    // Example of listening to an event and changing state:
    element.querySelector("button.changeState").addEventListener("click", () => {
        // The user clicked on the "Change State" button in this XBlock
        someStateVariable = false;

The main thing to note here is that everything related to your XBlock’s code should be wrapped in a single function (the main function of your XBlock), and all variables should be defined and used within that function.

Also any time you lookup elements within the XBlock you should always use element.querySelector(...) or $(element).find(...) or similar, to find elements within the current XBlock only, not any other similar XBlocks on the same page.