Hi everyone,

I'm trying to create a custom data privacy settings box at the beginning of my survey. The idea is that one group will see a traditional data privacy box, and another will see one with a warning label above it. I'm then going to compare the percentage of people who click "see more" on the box.

I have mock-ups of the two privacy boxes but i'm not sure exactly how to implement them into my survey.

Any help would be much appreciated.

Thanks,
Jack

Hi,
and we would appreciate if you send us - at least show us - your mock-ups.


In my opinion the easiest way is to have this not on the welcome screen but as first question. Here you may use Expression Manager to display the respective box.

Joffm

Thanks for your reply.

I added the mock ups in attachments below. I assume I will be able to track the number of users who click "accept" and "reject". Do I need to add some sort of button to do so? Also, I hope it will work so that when they click "learn more and customise", they will be taken to a screen showing them the relevant data information (which I have already written).

Thanks,
Jack

Aside from using Expression Manager to show/hide the two messages, this is more an exercise in HTML and CSS than in LimeSurvey development.

Regarding "learn more and customise", I would place that in a Bootstrap modal - getbootstrap.com/docs/4.0/components/modal/

Adding this to Tony's remark::
Using a bootstrap modal and a simple bootstrap button you may create this

and


And some more:

or


all rounded:


Joffm

Ok i'll try this. Thanks for your help.

Another quick question for you if you don't mind. Could I use bootstrap buttons for accept/reject as well? The buttons don't have to be real, I would just like to track the number of people who clicked them.

Thanks,
Jack

Also, would you mind sending the code that you used to create the model?

Thanks,
Jack

Hi, Jack,

the Accept/Reject buttons are bootstrap buttons (list(radio) with bootstrap button option)

And the modal dialog is the bootstap example
getbootstrap.com/docs/3.4/javascript/#modals

Joffm

Thanks for your reply. I have copy and pasted the static modal code (see below) into the answer box but when implemented into my survey it only leads to a blank screen.

<div class="modal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Modal title</h5>
<button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<p>Modal body text goes here.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary">Save changes</button>
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>

Jack

The modal pop-up is hidden by default.

You need a button (or event listener) to open it.