它是一个工作小提琴http://jsfiddle.net/5DCZw/963/但是当在浏览器上加载时，一个功能无法正常工作，即当我将（a），（b），（c），（d）拖到文本框时，值不会得到存放在小提琴中。
<!DOCTYPE HTML>
<html>
<head>
<link type="text/css" rel="stylesheet" href="Untitled-2.css" />
<style>
.not_attempted {color:red; font-weight:700;}
.correct {color:green; font-weight:700;}
.incorrect {color:red; font-weight:700;}
</style>
</head>
<body>
<div class="wrapper">
<div class="header">
<div class="header1">
<div class="heading1">Inside Our Earth</div>
<div class="heading2">How to match?</div>
<div class="heading3">How to match?</div>
</div>
<div class="header2"></div>
</div><!--header closed-->
<div class="front_page">
<div class="fp1"><h1>Instruction</h1></div>
<div class="fp2"><h2>Match Column <b style="color:#000;">A</b> with Coloumn <b
style="color:#000;">B</b> by dragging given letters.</h2></div>
<div class="fp3"><h2>After you have attempted answering all questions, click on the <b
style="color:#B30000;">"Submit"</b> button to know the Score</h2></div>
<input type="button" class="continue" value="Continue"/>
<div class="ffooter"><b style="position:absolute;margin-left:680px; margin-
top:40px;">Copyright @ 2014 Educo International.inc</b></div>
</div><!--front_page closed-->
<div id="element_to_pop_up">
<div class="e1">How to match?</div>
<div class="e2">
<ul><li><span>Take the mouse on the top of the button in column <b>B</b>.</span></li>
<li><span>When mouse become a hand click and drag.</span></li>
<li><span>Place it on the appropriate box in the left column.</span></li>
</ul>
</div>
</div>
<div class="container">
<div class="container_top"></div>
<div class="cntt1">Match Column <b style="color:#000;">A</b> with Coloumn <b
style="color:#000;">B</b> by dragging given letters.</div>
<div class="cntt2">Column (A)</div>
<div class="cntt3">Column (B)</div>
<div class="cntt4"></div>
<div class="cntt5"></div>
<input type="button" class="new_set" value="New Set" />
<input type="button" class="done" value="Done" />
<input type="button" class="soln" value="Solution" disabled="true"/>
<input type="button" class="reset" value="Reset all"/>
<div class="cnt1"></div>
<div class="cnt2"></div>
<div class="cnt3"></div>
<div class="cnt4"></div>
<div class="cnt5"></div>
<div class="cnt6"></div>
<div class="cnt7"></div>
<div class="cnt8"></div>
<div class="ans_set1">
<input type="text" maxlength="10" value="" class="ans_set1_1" />
<br><input type="text" maxlength="10" class="ans_set1_2" />
<br><input type="text" maxlength="0" class="ans_set1_3" />
<br><input type="text" maxlength="0" class="ans_set1_4" />
</div>
<div class="ans_set2">
<input type="text" maxlength="10" class="ans_set2_1" />
<br><input type="text" maxlength="10" class="ans_set2_2" />
<br><input type="text" maxlength="10" class="ans_set2_3" />
<br><input type="text" maxlength="10" class="ans_set2_4" />
</div>
<div class="abcd">
<div class="a" id="draggable"><b>(a)</b></div>
<div class="b" id="draggable"><b>(b)</b></div>
<div class="c" id="draggable"><b>(c)</b></div>
<div class="d" id="draggable"><b>(d)</b></div>
</div>
</div><!--container closed-->
<div class="footer"><b style="position:absolute;margin-left:680px; margin-
top:40px;">Copyright @ 2014 Educo International.inc</b>
</div><!--footer closed-->
</div><!--wrapper closed-->
<script src="jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="jquery-ui.min.js"></script>
<script type="text/javascript" src="jquery-ui1.js"></script>
<script type="text/javascript">
var array_i = new Array();
array_i [0] = {question : "Sima " ,answer:"5"};
array_i [1] = {question : "Rocks " ,answer:"6"};
array_i [2] = {question : "Mineral " ,answer:"13"};
array_i [3] = {question : "Shale " ,answer:"1"};
array_i [4] = {question : "Hydrosphere " ,answer:"24"};
array_i [5] = {question : "Environment " ,answer:"1"};
array_i [6] = {question : "Biosphere " ,answer:"23"};
array_i [7] = {question : "Atmosphere " ,answer:"1"};
var array_j = new Array();
array_j [0] = {answer:"Changes into Slate"};
array_j [1] = {answer:"the materials of the Earth's crust "};
array_j [2] = {answer:"have definite chemical composition"};
array_j [3] = {answer:"made up of Silica and Magnesium"};
array_j [4] = {answer:"Our surroundings"};
array_j [5] = {answer:"Domain of water"};
array_j [6] = {answer:"Blanket of air which surrounds the Earth"};
array_j [7] = {answer:"Narrow zone where land,water and air interact"};
i=0
$(document).ready(function () {
$(function () {
$(".a,.b,.c,.d").draggable({
revert: true,
helper: 'clone',
start: function (event, ui) {
$(this).fadeTo('fast', 0.5);
},
stop: function (event, ui) {
$(this).fadeTo(0, 1);
}
});
$(".ans_set1_1,.ans_set1_2,.ans_set1_3,.ans_set1_4").droppable({
accept: ".a,.b,.c,.d",
drop: function (event, ui) {
var $answer=ui.draggable;
var $input=$(event.target);
var val=$answer.text();
$input.val(val);
}
});
});
$('.new_set').click(function() {
$('.cnt1,.cnt2,.cnt3,.cnt4,.cnt5,.cnt6,.cnt7,.cnt8').empty();
i=i+4
if(i==8)
{
i=0;
}
$(".cnt1").append("<p>"+"<b style='font-family:Comic Sans MS, cursive;
color:#FF0080'>"+["("]+[i+1]+[")."]+"</b>"+ "<b style='margin-left:50px;'>"+array_i[i]
['question']+"<span class='label3'></span></p>");
$(".cnt2").append("<p>"+"<b style='font-family:Comic Sans MS, cursive; color:#FF0080'>"+
["("]+[i+2]+[")."]+"</b>"+ "<b style='margin-left:50px;'>"+array_i[i+1]['question']+"<span
class='label3'></span></p>");
$(".cnt3").append("<p>"+"<b style='font-family:Comic Sans MS, cursive; color:#FF0080'>"+
["("]+[i+3]+[")."]+"</b>"+ "<b style='margin-left:50px;'>"+array_i[i+2]['question']+"<span
class='label3'></span></p>");
$(".cnt4").append("<p>"+"<b style='font-family:Comic Sans MS, cursive; color:#FF0080'>"+
["("]+[i+4]+[")."]+"</b>"+ "<b style='margin-left:50px;'>"+array_i[i+3]['question']+"<span
class='label3'></span></p>");
$(".cnt5").append("<b >"+array_j[i]['answer']+"</b>");
$(".cnt6").append("<b>"+array_j[i+1]['answer']+"</b>");
$(".cnt7").append("<b>"+array_j[i+2]['answer']+"</b>");
$(".cnt8").append("<b>"+array_j[i+3]['answer']+"</b>");
if(i==0)
{
$('.ans_set1').show();
$('.ans_set2').hide();
}
if(i==4)
{
$('.ans_set2').show();
$('.ans_set1').hide();
}
});
$('.continue').click(function() {
$('.heading2,.front_page').hide()
$('.heading3,.container,.footer').show()
$(".cnt1").append("<p>"+"<b style='font-family:Comic Sans MS, cursive; color:#FF0080'>"+
["("]+[i+1]+[")."]+"</b>"+ "<b style='margin-left:50px;'>"+array_i[i]['question']+"
</b>"+"<span class='label3'></span></p>");
$(".cnt2").append("<p>"+"<b style='font-family:Comic Sans MS, cursive; color:#FF0080'>"+
["("]+[i+2]+[")."]+"</b>"+ "<b style='margin-left:50px;'>"+ array_i[i+1]
['question']+"<span class='label3'></span></p>");
$(".cnt3").append("<p>"+"<b style='font-family:Comic Sans MS, cursive; color:#FF0080'>"+
["("]+[i+3]+[")."]+"</b>"+ "<b style='margin-left:50px;'>"+ array_i[i+2]['question']+"<span
class='label3'></span></p>");
$(".cnt4").append("<p>"+"<b style='font-family:Comic Sans MS, cursive; color:#FF0080'>"+
["("]+[i+4]+[")."]+"</b>"+ "<b style='margin-left:50px;'>"+ array_i[i+3]
['question']+"<span class='label3'></span></p>");
$(".cnt5").append("<b>"+array_j[i]['answer']+"</b>");
$(".cnt6").append("<b>"+array_j[i+1]['answer']+"</b>");
$(".cnt7").append("<b>"+array_j[i+2]['answer']+"</b>");
$(".cnt8").append("<b>"+array_j[i+3]['answer']+"</b>");
});
$ ('.heading3').mouseover(function() {
$(".heading3").css({"color":"yellow",'font-size' : '34px'})
$(this).click(function() {
$('#element_to_pop_up').bPopup();
});(jQuery);
$(this).mouseout(function() {
$(".heading3").css({"color":"#FFF",'font-size' : '26px'});
});
});
});'
</script>
</body>
</html>