1

少し前に、ユーザーが 5 つのオプションのいずれかに投票できるようにする 5 つのボタンを備えた単純な Cocoa (OSX) アプリを作成しました。ボタンがクリックされると、アプリはクリックされたボタンに関するフィードバックを提供し、ユーザーの投票に感謝し、次の投票者を許可するために初期状態に戻ります。投票は単純なテキスト ファイルに書き込まれ、すべての投票が行われた後に取得されます。非常にシンプルですが、その目的には問題ありません (娘の学校のクラス代表者に投票するための素晴らしい方法です)。

今度は、html5 を使用して Web ブラウザー用に同じシステムを開発するように依頼されました。学校では、同時に複数のコンピューターでセットアップを実行したいと考えています。そのため、ローカル サーバーとそれに接続された 2 台または 3 台のコンピューターがあります。投票からのデータをサーバーに書き込む必要があります。

誰かがすでにこれを行っている例の正しい方向に私を向けることができますか? いくつかの投票システムを見つけましたが、それらはすべてラジオ ボタンまたはチェックボックスで動作します。(アニメーションも) 背景に 5 つの大きなグラフィック (可能であればアニメーション) が必要です。ベテランの HTML5 エディターにとってはすべて非常に簡単だと思いますが、私は初心者です。

4

1 に答える 1

1

さて、あなたは「初心者」だと言いましたが (参考までに、私もプロの開発者ではありません)、フォームとは何か、どのように機能するかを知っていると思います。以下は非常に単純です。AJAX も使用しません。（コメントで説明。）

コードは 1 つのファイルになります。あなたはPHPについて言及したので、それを使用できると思います。それは私が以下で使用しているものです：

<?

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>

未検証。

于 2013-05-02T16:31:21.140 に答える