This is not supported in this plugin. Pick ’em style style prediction is on my wishlist for a future version, but you’ll have to wait for that.
At the moment there are a couple of options:
- Change the plugin to match your wishes.
- Let users fill in 1 for the winner and 0 for the losing team.
- Use a piece of javascript to change the prediction form to a pick ’em style layout. I once made something for another user, see code below as an example.
Don’t know which one will work for you.
// pick'em style predictions (v2.3.8 and below)
jQuery( document ).ready( function() {
jQuery( 'table.matchinfo.input tr' ).filter( function() {
$this = jQuery( this );
return $this.attr( 'id' ) && $this.attr( 'id' ).substr( 0, 5 ) === 'match';
} )
.each( function() {
selected = 0;
jQuery( 'td.score', this ).each( function( index ) {
$this = jQuery( this );
value = $this.text();
if ( value == '' && $this.children().length > 0 ) {
$this.siblings( '.home, .away' )
.css( 'cursor', 'pointer' )
.bind( 'click', function() {
$this = jQuery( this );
team = $this.attr( 'class' ); // home or away
$this.siblings( '.score' ).find( 'input[name^="_' + team + '"]' ).val( '1' );
$this.siblings( '.score' ).find( ':not(input[name^="_' + team + '"])' ).val( '0' );
$this.css( 'font-weight', 'bold' ).css( 'color', 'orange' );
$this.siblings( ':not(.' + team + ')' ).css( 'font-weight', 'normal' ).css( 'color', '' );
} );
value = jQuery( 'input', this ).val();
}
selector = ( index == 0 ) ? '.home' : '.away';
if ( value == '1' ) $this.siblings( selector ).css( 'font-weight', 'bold' )
.css( 'color', 'orange' );
$this.hide();
} );
} );
jQuery( 'table.matchinfo.input' ).show();
} );
Thanks! I should be able to get that code to work for me! Looking forward to the update!
Can you provide some information on where we should add that code to get pick ’em style predictions?
Thanks!
It’s a piece of javascript. You can add it between <script> tags in your template header, add it to one of the javascript files of your template, add it to the javascript file assets/pool.min.js of the Football Pool plugin, or use a plugin that enables you to add javascript to your blog.
Remember that if you change files in the plugin or in your template, then these changes will be gone after every update of the plugin or the template. So you will have to do them again, or don’t update.
So my suggestion would be to find a plugin that enables you to add custom javascript.
p.s. I haven’t tested the above code with newer versions of the plugin (after 2.3.8).
Thanks! Would there be a simple way to add to the Javascript the ability for users to choose a draw?
Kinda depends on your javascript skills if it is simple. The script now toggles the choice: if team A is clicked, then team B is deselected and the corresponding inputs are set to 1 and 0.
For a draw this auto-toggle shouldn’t be done, a user would have to click to select or deselect. A select sets the input to 1 and a deselect sets the input to 0.
And you would have to think of the scenario when a user selects both teams, both now have a score of 1, and then deselects them, both teams now have a score of 0. That end scenario is also a draw, but is different from the start, where both inputs are empty; which has the meaning of: not predicted yet. But a user doesn’t see the difference.
