タロタローグ ブログ

<p>
    <script type="text/javascript" src="prototype.js"></script>
    <script type="text/javascript" src="scriptaculous.js"></script>
    <div id="question" style="font-size:large;">本能寺の変で死んだのは？</div>
    <div id="popupper" style="border:solid black 1px;width:50%;padding:10px;background-color:#11CFFF">
        <div class="post_item" id="ans1" style="border:solid black 1px;width:90%;background-color:#FFFFFF;margin:5px;">織田信長</div>
        <div class="post_item" id="ans2" style="border:solid black 1px;width:90%;background-color:#FFFFFF;margin:5px;">明智光秀</div>
        <div class="post_item" id="ans3" style="border:solid black 1px;width:90%;background-color:#FFFFFF;margin:5px;">豊臣秀吉</div>
        <div class="post_item" id="ans4" style="border:solid black 1px;width:90%;background-color:#FFFFFF;margin:5px;">徳川家康</div>
    </div>
    <div id="answer" style="border:solid black 1px;width:50%;padding:10px;background-color:#AACFFF;margin-top:5px;">
        回答欄：
        <input type="text" id="name" style="width:90%;"/>
    </div>
    <div id="result"></div>
    <script>
    Droppables.add( "answer",{
        accept : "post_item",
        onDrop : function(dragElement, dropElement, event){
            $("name").value = dragElement.innerHTML;
            if ($("name").value == "織田信長") {
                $("result").innerHTML = "正解！";
            } else {
                $("result").innerHTML = "間違い！";
            }
        }
    });
    new Draggable("ans1", {revert:true});
    new Draggable("ans2", {revert:true});
    new Draggable("ans3", {revert:true});
    new Draggable("ans4", {revert:true});
    </script>
</p>