Teammates: instructor editing questions: Make the 'responses will be deleted' message harder to miss

[damithc]

Currently, it looks like a regular message and users might click 'OK' without reading it.

[leonardhml]

Hello, I would like to work on this issue. May I ask for some pointers to the possible files that I can look into to fix this issue?

[damithc]

Start with a d.FirstTimers issue first. Those are easier to figure out by yourself.

[leonardhml]

Hi Prof, I have already done one d.FirstTimers task. The instructions were that I should only do one of those. But I will look out for other easier tasks first instead of this one then.

[tungnk1993]

Since html tag can't be used in default modal dialog, I think it's better to use prompt dialog to get a confirm message from user. Also, the dialog can be shortened a bit.

Here's what I implemented:

Javascript code:

Before

if (!confirm('Editing these fields will result in all existing responses for' +
                       ' this question to be deleted. Are you sure you want to continue?')) {
    event.stopImmediatePropagation();
    return false;
}

After

var promptAnswer = prompt('Editing these fields will delete all existing responses for' +
                                    ' this question.\nType \'DELETE\' to confirm.')

if (promptAnswer != 'DELETE') {
    event.stopImmediatePropagation();
    return false;
}

May I know if this approach is acceptable?

[damithc]

I don't think we should ask the users to type anything. Perhaps look for some other means to show a richer dialog box?

[tungnk1993]

For a richer dialog box, I would suggest using external library for nice UI and easy customization (https://nakupanda.github.io/bootstrap3-dialog/). However, this also requires changes to multiple js files to ensure consistency.

[damithc]

Before adding another external library, I want to make sure the existing libraries don't provide a reasonable alternative, even if not the best.

[Sumei1009]

Could we use jQuery dialog and css styling for the customisation?

[xeia]

Would implementing a bootstrap modal such as:

in place of the confirmation box, be viable?

[damithc]

Yes, that might work. @LowWeiLin @kanghj what do you think?

[LowWeiLin]

Looks fine to me. We could also show the number of affected responses in the modal too, in another issue.

[damithc]

And if we are going to use modal windows for dialog boxes extensively and system-wide, we should probably extract out common stuff to somewhere. Again, can be a separate issue. I think @YongJieYongJie used a modal window recently for a similar purpose.

[wkurniawan07]

On a related note, this ESLint rule might be of interest. It's one of the rules that Google enforced that we (currently) don't.

[xeia]

I refactored it out as a shared tag for a confirmation modal, the difference with #5290 would be having a yes/no button to get the user's choice instead of being like a message prompt?

[YongJieYongJie]

@xeia For reference, my PR is at #5290

• I noticed in your screenshot the top corners are not rounded;
• I actually added css styles to round off the top corners of the modal because after applying bootstrap colors, the border radius was overwritten

[xeia]

@YongJieYongJie Thanks for the heads up, the screenshot was done before your PR was merged in hence the styles you added were not reflected. Attached below is the screenshot I just took, of the current modal dialog: