Welcome to the LimeSurvey Community Forum

Ask the community, share ideas, and connect with other LimeSurvey users!

Making a custom data privacy settings box

  • JackMackSir
  • JackMackSir's Avatar Topic Author
  • Offline
  • New Member
  • New Member
More
3 years 4 months ago #208439 by JackMackSir
Making a custom data privacy settings box was created by JackMackSir
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
The topic has been locked.
  • Joffm
  • Joffm's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
3 years 4 months ago - 3 years 4 months ago #208443 by Joffm
Replied by Joffm on topic Making a custom data privacy settings box
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

Volunteers are not paid.
Not because they are worthless, but because they are priceless
Last edit: 3 years 4 months ago by Joffm.
The following user(s) said Thank You: JackMackSir
The topic has been locked.
  • JackMackSir
  • JackMackSir's Avatar Topic Author
  • Offline
  • New Member
  • New Member
More
3 years 4 months ago - 3 years 4 months ago #208448 by JackMackSir
Replied by JackMackSir on topic Making a custom data privacy settings box
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

Last edit: 3 years 4 months ago by JackMackSir.
The topic has been locked.
  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
3 years 4 months ago #208454 by tpartner
Replied by tpartner on topic Making a custom data privacy settings box
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/

Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
The following user(s) said Thank You: JackMackSir
The topic has been locked.
  • Joffm
  • Joffm's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
3 years 4 months ago - 3 years 4 months ago #208460 by Joffm
Replied by Joffm on topic Making a custom data privacy settings box
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

Volunteers are not paid.
Not because they are worthless, but because they are priceless
Last edit: 3 years 4 months ago by Joffm.
The following user(s) said Thank You: JackMackSir
The topic has been locked.
  • JackMackSir
  • JackMackSir's Avatar Topic Author
  • Offline
  • New Member
  • New Member
More
3 years 4 months ago #208470 by JackMackSir
Replied by JackMackSir on topic Making a custom data privacy settings box
Ok i'll try this. Thanks for your help.
The topic has been locked.
  • JackMackSir
  • JackMackSir's Avatar Topic Author
  • Offline
  • New Member
  • New Member
More
3 years 4 months ago #208636 by JackMackSir
Replied by JackMackSir on topic Making a custom data privacy settings box
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
The topic has been locked.
  • JackMackSir
  • JackMackSir's Avatar Topic Author
  • Offline
  • New Member
  • New Member
More
3 years 4 months ago #208637 by JackMackSir
Replied by JackMackSir on topic Making a custom data privacy settings box
Also, would you mind sending the code that you used to create the model?

Thanks,
Jack
The topic has been locked.
  • Joffm
  • Joffm's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
3 years 4 months ago #208639 by Joffm
Replied by Joffm on topic Making a custom data privacy settings box
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

Volunteers are not paid.
Not because they are worthless, but because they are priceless
The topic has been locked.
  • JackMackSir
  • JackMackSir's Avatar Topic Author
  • Offline
  • New Member
  • New Member
More
3 years 4 months ago #208640 by JackMackSir
Replied by JackMackSir on topic Making a custom data privacy settings box
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 topic has been locked.
  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
3 years 4 months ago #208645 by tpartner
Replied by tpartner on topic Making a custom data privacy settings box
The modal pop-up is hidden by default.

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

Code:
<div id="myModal" 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-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">Close</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-secondary" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">Open Modal</button>

Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
The topic has been locked.

Lime-years ahead

Online-surveys for every purse and purpose