MCQ Lock

[Raun]

MCQ Lock

This is a support/feature request thread for the MCQ Lock plugin.

Direct download: MCQ Lock.pbp (2.28 KB)
Plugin library: Click Here

Current Features (v0.9.0-Beta):

1. Each thread can have its own set of questions (number of questions only limited by storage).
   
2. Each question can have 4 options.
   
3. Every question can have only 1 correct option.
   
4. Can add hints to every question.
   
5. Can add comments to be displayed when an incorrect option is submitted.
   
6. Once all questions linked to the thread are answered correctly, the thread will be unlocked (A private user key is used to keep track of user's unlocked threads).

How to Use:

1. Firstly, set the key permissions to Members & Staff for both read and write.
   
2. Then, to lock a thread with MCQs, you must find the ID of the thread. (This can be found from the URL of the thread).
   
3. With this Thread ID, add as many questions as you want in the 'Add MCQs' section.
   
4. The correct option must be indicated for each question by the option number (1/2/3/4).

Notes:

1. This is my first plugin; so, all you experienced coders, if you find my code cringy, let me know how I can improve it.
   
2. Also, since I haven't tested this extensively, please write here if you find any bugs.
3. You may edit the code and redistribute as you wish.

Upcoming Features:

1. Employing localStorage for Guests to keep track of unlocked threads.
   
2. Customizable style sheet for quiz questions.

[Boy_Wonder]

Hey I've been testing this and found a few possible issues, so I'll just list them below

- Guests can access quiz but they don't get a key, so use localStorage
- Don't refresh, just unhide the thread (don't use innerHTML, hide children of #content and append quiz into it)
- Allow for HTML struture change / styling of the quiz
- Also wanting to add that I can't make it work when utilising a heavily customized skin (something I tend to do a lot of)

[Raun]

Sept 14, 2017 1:12:20 GMT -8 Boy_Wonder said:

- Guests can access quiz but they don't get a key, so use localStorage

If I'm not mistaken, localStorage is cleared when the user clears cache. So, the user will have to redo the quiz again to unlock the thread. Also, if the user changes device, they have to do it again. I made this under the assumption that only members of the forum will be allowed access to contents. But I can make it use localStorage just for guests in the future revisions.

- Don't refresh, just unhide the thread (don't use innerHTML, hide children of #content and append quiz into it)

Any particular reason why? Is it a performance thing or just preference? Just trying to learn.

- Allow for HTML struture change / styling of the quiz

Noted. Will add this feature in the next revision.

- Also wanting to add that I can't make it work when utilising a heavily customized skin (something I tend to do a lot of)

Can't be sure what's causing the issue unless I look at the page; I expect it to work in most, unless content's class name is not 'content' or if there is an overlap between the class names I used for the quiz and those in the page.

Thanks for the feedback!

[Boy_Wonder]

Sept 14, 2017 17:03:09 GMT -8 Raun said:

Sept 14, 2017 1:12:20 GMT -8 Boy_Wonder said:

- Guests can access quiz but they don't get a key, so use localStorage

If I'm not mistaken, localStorage is cleared when the user clears cache. So, the user will have to redo the quiz again to unlock the thread. Also, if the user changes device, they have to do it again. I made this under the assumption that only members of the forum will be allowed access to contents. But I can make it use localStorage just for guests in the future revisions.

- Don't refresh, just unhide the thread (don't use innerHTML, hide children of #content and append quiz into it)

Any particular reason why? Is it a performance thing or just preference? Just trying to learn.

- Allow for HTML struture change / styling of the quiz

Noted. Will add this feature in the next revision.

- Also wanting to add that I can't make it work when utilising a heavily customized skin (something I tend to do a lot of)

Can't be sure what's causing the issue unless I look at the page; I expect it to work in most, unless content's class name is not 'content' or if there is an overlap between the class names I used for the quiz and those in the page.

Thanks for the feedback!

Basically I'm one of those awkward people who like to change my content classes though apparently now I've tried again it wants to work (that's good). 

As for this bit:

- Don't refresh, just unhide the thread (don't use innerHTML, hide children of #content and append quiz into it)

      Any particular reason why? Is it a performance thing or just preference? Just trying to learn.

its to do with the fact that it's removing all the content which is why you need to refresh. If you hide the content instead you could unhide it when the submit button is pressed and all answers are validated correct, removing the need for a refresh and an additional page view. Could also break some plugins depending on how they're coded if they're expecting something and then its not there. 

Also local storage is persistent for the browser being used at least I think it is... I know Peter is more familiar with this then I am (I don't touch a lot of code. I tend to break it instead)

[Peter]

Sept 15, 2017 3:33:20 GMT -8 Boy_Wonder said:

Also local storage is persistent for the browser being used at least I think it is... I know Peter is more familiar with this then I am (I don't touch a lot of code. I tend to break it instead)

Correct. Obviously it all depends on browser settings. But usually by default localStorage for the browser is persistent.

---

From reading the posts above, you have a few options to think about for guests / logged out users.

1. Show the thread as normal if guest is viewing.
2. Allow the guest to use the quiz and store in localStorage.
3. Display message to the guest that they need to login.

I think #3 would probably be the better choice depending on if you feel you can't do #2. #2 requires a little more thought.

#2:
- If logged out, use localStorage.
- If logged in, check localStorage and key (member may not have logged in, so localStorage would have the data for the thread).
- [Bonus] Sync up key and localStorage so it works both ways for logged in and logged out.

As you can see, it can get more complex as you think about it.

[₪» ⅀ ƪ Ƒ «₪]

Peter, if you don't mind my asking - the author hasn't been on in a year so I know better than to ask their assistance in this, heh. This plugin appears to work great except that it briefly shows the actual thread before loading/changing to the quiz - which seems like it could be a potential breach issue, if the user has momentary access to the thread. The plugin does have
"build" open. Do I need to add some sort of $( document ).ready() perhaps? If not an easy solution, I'll leave it be, but figured I'd see if it is something as simple as adding that xD

[Peter]

₪» ⅀ ƪ Ƒ «₪ ,

Unfortunately it's something you can't avoid, even when manipulating the DOM as soon as it becomes ready.

A better way would be to use CSS to target that page by writing out the CSS to the header.  You can do it, but you are just duplicating code.  

Code isn't mine, it's basically a copy and paste of the section that does the check to see if the thread ID is in the key.  I just added the CSS line.

<script>
   
    var threadID = pb.data('thread_id');
    var settings =  pb.plugin.get('mcq_lock').settings;
    var lockedThreadIDs = []; var j = 0;
    for (var i=0;i<settings.lockedThreads.length;i++) {
        lockedThreadIDs[i] = settings.lockedThreads[i].lockThreadID;
        if (lockedThreadIDs[i] == threadID) {
            indices[j] = i;
            j++;
        }
    }
    var userUnlocks = pb.plugin.key('unlocked_threads').get();
      if (userUnlocks == undefined || userUnlocks.indexOf(threadID) == -1) {
        if (lockedThreadIDs.indexOf(threadID) != -1) {
            document.write("<style>#content .container { display: none} </style>");
        }
    }
</script>

Add to the header in the global component that is already there.

[₪» ⅀ ƪ Ƒ «₪]

Hmm doesn't appear to have done the trick - but that's alright, I appreciate you trying for me! :)