validation radiobox

Hi,

I use CF to create a sort of quiz.

Is it possible to validate a radiobox with 3 options in a way that the correct answer should be given in order to send the form?

For example:

Question 10?
A. Incorrect option
B. Correct option
C. Incorrect option

In case option A or B the form should not send but a message should appear at the radiobox with "your answer is incorrect, please try again"...

Hi elmar,

I guess that you could do that with custom JavaScript fairly easily.

Bob

Thanks Bob, I bet it is easy. If you know how to code Javascript...
So could you send me the code and I'll buy you a coffee or even two.

Hi elmar,

Here's an example that works by disabling the submit button:

jQuery(document).ready(function(jQ) {
  var q10, submit;
  submit = jQ('#submit_btn');
  q10 = jQ("input[name='q10']");
  q10.click(function(e) {
    if ( jQ(this).val() == 'B' ) {
      submit.prop('disabled', false);
    } else {
      submit.prop('disabled', true);
    }
  });
  submit.prop('disabled', true);
});

Hi elmar,

The code goes into a Load JavaScript action in the On Load event of your form.

Bob

Great thanks! I have added the JS code into a Load JS event and placed it on top of the On Load events.
However it doesn't work jet. Probably because the code needs to be adjusted for the multiple choice questions.

When I open the radiobox with the answers for MC question 10, I see this:

Field Name: antwoord10

Options:
a-is-fout=a: incorrect answer
b-is-goed=b: the correct answer
c-is-fout=c: incorrect answer

Field ID: antwoord10

So I adjusted the code like this:

    jQuery(document).ready(function(jQ) {
      var antwoord10, submit;
      submit = jQ('#submit_btn');
      antwoord10 = jQ("input[name='antwoord10']");
      antwoord10.click(function(e) {
        if ( jQ(this).val() == 'b-is-goed' ) {
          submit.prop('disabled', false);
        } else {
          submit.prop('disabled', true);
        }
      });
      submit.prop('disabled', true);
    });

Again I am not able to code any javascript so please help me on the way a bit further.

Hi elmar,

The first problem that I can see is that the script depends on the Submit button having an id='submit_btn' and yours has no id set.

There are so many scripts running on the page that I strongly recommend that you test without the template using this URL (replace your domain name):

https://www.your_domain_name.com/index.php?option=com_chronoforms&chronoform=vragenvb2tknles2&tmpl=component

Bob

Thank you very much for your help.

Cheers!

One more question I have.... The script works fine now for one question (nr. 10) of the quiz only.
How could I adjust this script so it applies to all 10 questions that are in the same form/quiz?

jQuery(document).ready(function(jQ) {
      var antwoord10, submit;
      submit = jQ('#submit_btn');
      antwoord10 = jQ("input[name='antwoord10']");
      antwoord10.click(function(e) {
        if ( jQ(this).val() == 'goed' ) {
          submit.prop('disabled', false);
        } else {
          submit.prop('disabled', true);
        }
      });
      submit.prop('disabled', true);
    });

Hi elmar,

You can repeat the code ten times, or convert the function(e) into a named function and call that. But you have to call it and tell it what the 'correct' value is in each case.

Bob

OK, "Goed" (correct in Dutch) has to be unique for ever question.
it works now..