Drag and Drop Submit Button keeps reappearing

[VirusX]

Hi Captivate community!

This is my first post here, I am working on an E-Learning course with Captivate 11.8.2 (I'm happy to update once this course is done)

Here is what I am trying to achive: 

A Drag&Drop Interaction with 8 drag targets and 8 drop zones. Each drop zone should only ever recieve 1 target (this works just fine). The user should only be abled to submit the interaction once - this does not work. The user can navigate back and forth through the course via buttons. Going back to a previous slide and coming back to the slide with the Drag&Drop always displays the "Submit" button for the Drag&Drop again.

Here are my Drag&Drop Options:

Here are my Drag&Drop Actions:

Success / Failure messages are displayed via JavaScript. Additionally the scripts show and hide some other objects, here is the success script (the failure is the same just with different IDs to show and hide):

window.cpAPIInterface.setVariableValue('_v_quiz_submitted', 1);

cp.show('t_well_done');

cp.show('drop_1');
cp.show('drop_2');
cp.show('drop_3');
cp.show('drop_4');
cp.show('drop_5');
cp.show('drop_6');
cp.show('drop_7');
cp.show('drop_8');

cp.show('content_blocker');

cp.hide('drag_1');
cp.hide('drag_2');
cp.hide('drag_3');
cp.hide('drag_4');
cp.hide('drag_5');
cp.hide('drag_6');
cp.hide('drag_7');
cp.hide('drag_8');

What I have tried as a last resort is to use BrowserInspector to get the ID of the Submit button and remove it by force from the page in a script i run whenever the user enters the slide:

if(window.cpAPIInterface.getVariableValue('_v_quiz_submitted') == 1)
{
    //si21004 is the ID of the submitbutton found in browser inspector, it is always that
    var toDel = document.getElementById('si21004');
    if(toDel)
        toDel.parentNode.removeChild(toDel);
}

This works .. the button is removed from the DOM .. however .. it is still visible:

You can even see the outline of the actual element that is "behind" it shimmering through .. I can not access this submit button in any way. I can't find it in the DOM inspector and I can't select it with any browser tools - yet it blocks my Next-Button visibly.

So - can anyone please tell me how to do this properly? I am sure I am going at this in an overcomplicated way .. surely it is possible to have the submit button only ever show up once and after it is clicked it is gone - right? I must be missing something quite obvious here and I am grateful for any advice 🙂

Thanks a lot in advance!

[RodWard · Accepted solution]

One quick way to achieve your desired result is just to set your Drag and Drop Interaction to Include in Quiz.  That way, once your user returns to the D&D slide the Submit button is not present.

[VirusX]

Hey Rod, perfect thanks a lot! I was sure there was an easy way like that, there had to be .. thanks again for pointing it out to me 🙂

[Lilybiri]

Is the D&D set up as Knowledge Check or as Scored slide?

Do you want to have the Submit button disappear as soon as it has been clicked while being on the same slide?

If yes, I may provide you a solution but without all that JS. Sorry, but I did see your question but late last night and all that JS for a setup that can be done with built-in functionality, I suddenly felt too tired. 

Rod's answer is a solution when you return to the slide, since it will be locked. 

[VirusX]

Hey Lilybiri,

thanks for the reply! As for your question I am honestly not sure .. where can I see if it is a Knowledge Check or a Scored slide? I have a software developer background which is why coding is always my first approach 😉

As for your second question - yes, i want the submit button to disappear once clicked (this works so far) and reveal the next button to continue the course (this works also) it is just that if the user goes back to the slide with the D&D, submit used to reappear before i implemented Rod's suggestion.

Do you mind sharing your suggestion still? I am always happy to learn new things 🙂

[Lilybiri]

A KC slide is not scored, a quiz slide is scored. You turned the D&D slide in a scored quiz slide.

Since this solved your problem, and you have it already solved by JS when remaining on the slide you don't need another solution. Just wanted to tell that everything you coded can be done out of the package with Captivate's functionality.