Detect that all buttons have been clicked on a per user basis

Question

I'm creating a "Complete tasks to unlock" system, but I'm very newbie on coding and can't make it work. I'm literally weeks trying to search ways to do it, but nothing until know. I have only the very basic.

I'll separate all that I need and I really apreciate any help of you guys.

Oh, and I'm using Wordpress and Visual Composer for this.

Well, I already have a code for it (or almost), but isn't working properly as I want.

What I need is that a certain button (.Test) only appear after some completed tasks.

Inittialy, the tasks will be "Visit this link to unlock". So I'll give some buttons, and each button will open a different link. When clicked, the button will trigger the action, unlocking the button to get the cd-keys/links. But the problem is that I need the user click on all the buttons for it. On the code that I'm using, when the user click in just one task button, the .Test appears.

Here's the code that I'm using:

jQuery code

<script>
jQuery(document).ready(function(){
 jQuery('.Like').click(function() {     //Will open a Facebook page
    jQuery('.Test').show();             //Show the button for the link generation
});
 jQuery('.Follow').click(function() {   //Will open a Twitter page
    jQuery('.Test').show();             //Show the button for the link generation
});
});
</script>

CSS code

.Test {
    display: none;
}

.Like,
.Follow {
    cursor: pointer;
}

I tried to use an && operator, but it doesn't work. I need that the user click on all the link buttons to show the button generator. Not just one.

thanks for any help.

If you need more info, please ask me.

You could store a click action flag into a data - attribute of some element and check that element before doing the next task. — Jeroen Heier, Jul 23 '17 at 09:27
your plan is quite detailed, however the things you tried to get towards a solution are very small.im missing these infos: what does your current code do? what do you want it to do? wheredid you use an && operator? — Jonas Wilms, Jul 23 '17 at 09:31
@Jonasw Actually it open a page and shows the hidden content, but I need that all the buttons are clicked for it, and not just one of the 2 buttons. And I used an && operator to merge the two codes, like jQuery('.Like' && '.Follow").click(function() — Kaio Loureiro, Jul 23 '17 at 09:35
@KaioLoureiro ok so you want to show it just if all buttons have been clicked right? — Jonas Wilms, Jul 23 '17 at 09:37
Have a look at [this](https://api.jquery.com/jquery.data/) page. Use the body element as "data storage". — Jeroen Heier, Jul 23 '17 at 09:39
ive edited the question to make it on the point ( it was far too broad in my opinion ), if you think your original question feel free to roll back... — Jonas Wilms, Jul 23 '17 at 10:12

Jonas Wilms · Answer 1 · 2017-07-23T10:00:22.953

0

One approach would be counting the clicks on these certain buttons, e.g. through storing the buttons in a Set and getting the Sets size:

jQuery(function(){
  var clicked=new Set;//a new unique set
  jQuery('.social').click(function() {     // some button clicked
       clicked.add(this);      //add this button to set
        if(clicked.size>=3) alert("wohoo, all buttons clicked");//actually: three different buttons with class social clicked
  });
});


<button class="social">Twitter</button>
<button class="social">Facebook</button>
<button class="social">GitHub</button>

http://jsbin.com/fanuloxori/edit?output

Note that Sets are quite new, may replace it with an unique array.

You may assign unique ids to the buttons, so you can keep track of the clicked ids, which then can be stored in a database, or on the users device:

jQuery(function(){
  var clicked=new Set((localStorage.getItem("clicked")||"").split(","));//a new unique set may restored from storage
  jQuery('.social').click(function() {     // some button clicked
       clicked.add(this.id);      //add this buttons id to set
       localStorage.setItem("clicked",[...clicked].join(","))
        if(clicked.size>=3) alert("wohoo, all buttons clicked");//actually: three different buttons with class social clicked
  });
});


<button class="social" id="twitter">Twitter</button>
<button class="social" id="facebook">Facebook</button>
<button class="social" id="github">GitHub</button>

edited Jul 23 '17 at 10:00

answered Jul 23 '17 at 09:41

Jonas Wilms

132,000
20
149
151

Oh nice. I'll try it. So I can change the alert("wohoo, all buttons clicked") part for jQuery('.Test').show(); right? – Kaio Loureiro Jul 23 '17 at 09:46
@KaioLoureiro exactly. – Jonas Wilms Jul 23 '17 at 09:47
Just a doubt: How to attribute this to the extra class on the buttons? I need to change each one for "social"? – Kaio Loureiro Jul 23 '17 at 09:51
@KaioLoureiro its probably better then having a few different classes. you could also select multiple classes *.Like, .Whatever* – Jonas Wilms Jul 23 '17 at 09:54
Hey @Jonasw there's a way to insert the id inside the code? Because I'm not using normal buttons, but buttons from Visual Composer. – Kaio Loureiro Jul 23 '17 at 10:23
@KaioLoureiro you could also use .textContent instead of .id for example. it just needs to be sth that stays over a reload and is unique – Jonas Wilms Jul 23 '17 at 10:25

score 0 · Answer 2 · answered Jul 23 '17 at 10:31

@Jonasw Thank you dude. Using the code bellow without id works fine. Now I have to click on all the buttons (I had set the classes of all for "social") to show the hiden content. But I couldn't use it with the data storage of your second code.

<script>
jQuery(document).ready(function(){
   var clicked=new Set;
      jQuery('.social').click(function() {
         clicked.add(this);
            if(clicked.size>=2) jQuery('.Test').show();
   });
});
</script>

@Jonasw Don't know if you was notified, but please look here — Kaio Loureiro, Jul 23 '17 at 10:32

Detect that all buttons have been clicked on a per user basis

2 Answers2