How to maintain a counter/score based on values in radio boxes?

Hi,

To make things easier, I'd suggest adding a common CSS class (like) for all the radios. You can do that with the class attribute of the field.

Then, you can perform some JS code like this:

1. Get total value:

var total = 0;
$( '.like input:checked' ).each( function() {
    total += $(this).val();
} );
// Output total somewhere
$( '#selector' ).text( total );

Anyway, as all the radio have values 1 or 0, the total value is equal to the number of "likes", which can be done with the following code.

1. Get number of likes:

var total = $( '.like input:checked' ).length;
// Show an error message
if ( total > 30 ) {
    alert( 'You have selected more than 30 likes. Please select again' );
    // or
    $( '.error-message' ).text( 'You have selected more than 30 likes. Please select again' );
}

Oh, I should have made it clear. It's the JavaScript code, so you should put it in your theme main script file. Or better, create a JS file (assume its name is custom.js) in your theme folder, and put this content inside:

$( function() {
    // Snippet goes here.
    var total = 0;
    $( '.like input:checked' ).each( function() {
        total += $(this).val();
    } );
    // Output total somewhere
    $( '#selector' ).text( total );

    // More snippet goes here.
} );

And then in your functions.php file of the theme, add the following code:

add_action( 'wp_enqueue_scripts', function() {
    wp_enqueue_script( 'custom-handle', get_template_directory_uri() . '/custom.js', array( 'jquery' ), '', true );
} );

This thing is quite technical, though.

For my understanding, what this js is doing is counting the number of checked items with class=like, and displaying the counter, right?

Yes, that's right.

I was wondering, can I also include this in the page from where I launch the Frontend Submission? Because then I can control the location where I want the counter to be displayed.

Yes, by putting it in a custom JS file will help you control everything easier.

By the way, I created the .js file, stored it in the js folder of my theme, and included the call in the functions.php, but it doesn’t show a counter, and I don’t know if it counts…

As it's in the js folder of your theme, you need to change the code in functions.php code to this:

add_action( 'wp_enqueue_scripts', function() {
    wp_enqueue_script( 'custom-handle', get_template_directory_uri() . '/js/custom.js', array( 'jquery' ), '', true );
} );

And please change the #selector in the snippet to the CSS selector of the element you want to show the total likes.