Question

Some time ago I created a simple Cocoa (OSX) app with 5 buttons allowing the user to vote for one of 5 options. When a button is clicked, the app gives some feedback about what button is clicked, thanks the user for his/her vote and goes back to the initial state to allow for the next voter. The votes were written to a simple text file to be retrieved after all the votes were cast. Very simple but OK for its purposes (a fancy way to vote for a class representative at my daughters school).

Now I'm asked to develop the same system for a web browser using html5. The school wants the setup to run on more than one computer at the same time. So we have a local server and two or three computers connected to it. The data from the votes needs to be written to the server.

Can someone point me in the right direction of an example that already does this? I found some voting systems but they all work with radio buttons or checkboxes, I need 5 large graphics (animated if possible) on an (also animated) background. I assume it's all very simple to the seasoned HTML5 editor, but I'm a beginner.

Was it helpful?

Solution

Okay, you mentioned you are a 'beginner' (FYI, I'm not a professional developer either), but I assume you know what forms are and how they work. The below is super-simple, I won't even use AJAX. (Explanation in comments.)

The code is going to be in one file. You mentioned PHP, so I assume you can use that. It's what I am using below:

<?

if (isset($_POST['vote'])) { // Check if there is a vote POSTed to our page
    // Store the vote. I don't know how you did it the previous time, I'm just going to write it to a text file
    $file = fopen("votes.txt", "w");
    fwrite($file, $_POST['vote']);
    fclose($file);
}

?>

<!-- the voting page -->

<HTML>
    <HEAD>
        <title>Vote</title>
    </HEAD>
    <BODY>
        <!-- Create a form to be able to send the vote to the server in the simplest way, but don't display it -->
        <form action="thispage.html" method="post" style="display:none;">
            <!-- I don't know what possible values there are. I'll just take 'foo' and 'bar'. Of course you can add more. -->
            <input type="radio" name="vote" value="foo" />
            <input type="radio" name="vote" value="bar" />
        </form>

        <!-- The images representing the (invisible) radio button -->
        <!-- I use the data-value attribute to store to which radio button this image corresponds -->
        <img src="path/to/foo/image" data-value="foo" />Vote FOO<br />
        <img src="path/to/bar/image" data-value="bar" />Vote BAR<br />

        <!-- Import jQuery for the sake of simplicity. -->
        <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
        <!-- The trickiest part. The script. -->
        <script>
            $("img").click(function() {
                 var value = $(this).data('value');        // Get the value
                 $("input[value='" + value + "']").click();// Click the corresponding radio button
                 $("form").submit(); // Submit the form.
            });
        </script>
    </BODY>
</HTML>

NOT TESTED.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top