pinyin3665
asked on
Making numbers appear one by one
Hello,
My questions are in the following web page:
http://www.pinyinology.com/wheel/tmark.html
Thanks for your help.
My questions are in the following web page:
http://www.pinyinology.com/wheel/tmark.html
Thanks for your help.
ASKER
It is for my spare-time interest. just add some interactions to one to my pages. i am not an educator. thanks for help.
my web site:
www.pinyinology.com
my web site:
www.pinyinology.com
Try this. Sound works in Chrome 26, not Firefox 19 though. Didn't try any other browser. Best if the sound file is on the same web server.
<!doctype html>
<html>
<head>
<meta charset='utf-8'>
<title>tmark</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
<style type='text/css'>
body {margin:4%; background:#deb; font-size:140%; }
#tone {border:2px solid blue; width:120px; padding:4px; border-radius:8px; font-size:120%; }
table {border-collapse:collapse; }
.mao td {border:2px solid blue; width:40px; height:40px; }
sup {position:relative; bottom:8px; color:red; font-weight:800; }
input {font-size:150%; width:150px; }
</style>
<script type="text/javascript">
$(document).ready(function(){
var audio = document.getElementById('soundClip');
$('input').on('click', function(){
var t = setTimeout(function(){
$('table.mao:first td:nth-child(4)').html('<sup>2</sup>');audio.play();
t = setTimeout(function(){
$('table.mao:first td:nth-child(7)').html("<sup>2</sup>");audio.play();
t = setTimeout(function(){
$('table.mao:first td:nth-child(12)').html('<sup>1</sup>');audio.play();
}, 1000);
}, 1000);
}, 1000);
});
});
</script>
</head>
<body>
<audio id="soundClip" preload="auto">
<source src="http://www.wavsource.com/snds_2013-04-07_2790854295826957/sfx/chime.wav"></source>
Your browser does not support the audio element.
</audio>
<table class='mao'>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
<br>
<table class='mao'>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td><sup>2</sup></td>
<td> </td>
<td> </td>
<td><sup>2</sup></td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td><sup>1</sup></td>
</tr>
</table>
<br>
<form id='fm'>
<input type='button' value='numerals'>
</form>
<p>
The above two horizontal tables are in fact single one. When clicking the numerals button, superscript numerals will appear, one by one, in the designated box of the blank table. The time interval between numerals is one (1) second. When a number appears, it's better that a sound happens. Thanks for help.
</p>
</body>
</html>
If you don't mind using a jquery plugin for the sound, you can use jPlayer and get better cross-browser support.
<!doctype html>
<html>
<head>
<meta charset='utf-8'>
<title>tmark</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="http://jplayer.org/2.1.0/js/jquery.jplayer.min.js"></script>
<style type='text/css'>
body {margin:4%; background:#deb; font-size:140%; }
#tone {border:2px solid blue; width:120px; padding:4px; border-radius:8px; font-size:120%; }
table {border-collapse:collapse; }
.mao td {border:2px solid blue; width:40px; height:40px; }
sup {position:relative; bottom:8px; color:red; font-weight:800; }
input {font-size:150%; width:150px; }
</style>
<script type="text/javascript">
$(document).ready(function(){
var jp = $("#jquery_jplayer_1");
$(jp).jPlayer({
ready: function(event) {
$(this).jPlayer("setMedia", {
mp3: "http://www.universal-soundbank.com/mp3/sounds/2041.mp3"
});
},
swfPath: "http://www.jplayer.org/2.1.0/js",
supplied: "mp3"
});
var audio = document.getElementById('soundClip');
$('input').on('click', function(){
$('table.mao:first td').html(' ');
var t = setTimeout(function(){
$('table.mao:first td:nth-child(4)').html('<sup>2</sup>');jp.jPlayer("play");
t = setTimeout(function(){
$('table.mao:first td:nth-child(7)').html("<sup>2</sup>");jp.jPlayer("play");
t = setTimeout(function(){
$('table.mao:first td:nth-child(12)').html('<sup>1</sup>');jp.jPlayer("play");
}, 1000);
}, 1000);
}, 1000);
});
});
</script>
</head>
<body>
<div id="jquery_jplayer_1"></div>
<table class='mao'>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
<br>
<table class='mao'>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td><sup>2</sup></td>
<td> </td>
<td> </td>
<td><sup>2</sup></td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td><sup>1</sup></td>
</tr>
</table>
<br>
<form id='fm'>
<input type='button' value='numerals'>
</form>
<p>
The above two horizontal tables are in fact single one. When clicking the numerals button, superscript numerals will appear, one by one, in the designated box of the blank table. The time interval between numerals is one (1) second. When a number appears, it's better that a sound happens. Thanks for help.
</p>
</body>
</html>ASKER
Hi, tommyBoy,
I will study both code tonight, and come back to you tomorrow or the day after. Have a night evening. Thanks a lot for your help.
pinyin3665
I will study both code tonight, and come back to you tomorrow or the day after. Have a night evening. Thanks a lot for your help.
pinyin3665
ASKER
I've requested that this question be closed as follows:
Accepted answer: 0 points for pinyin3665's comment #a39068272
for the following reason:
the solution is worth 500 points. very helpful.
Accepted answer: 0 points for pinyin3665's comment #a39068272
for the following reason:
the solution is worth 500 points. very helpful.
I believe the original poster made a mistake in not awarding me the 500 points. I base that on the sentiment in his closing comment.
ASKER
where can i mark the score of 500 points? this is a wonderful answer. thanks.
I believe the moderator will take care of it. Thanks.
I believe the original poster made a mistake in not awarding me the 500 points. I base that on the sentiment in his closing comment.(I must have clicked the wrong button when I first tried to cancel the closing of the question.)
Odd. I expected some indication that an objection to the closing was submitted but I don't see one. Also, I usually get an "Objection posted" email whenever a question I participated in is up for moderator review. It's been a while since I used the Object button myself so maybe I'm remembering the process incorrectly.
Still learning the system after two years @Modulus_Twelve. I'm sure the site's designers think it's all very intuitive and there's no way anyone could miss the obvious visual cues they have put in place. I think it's best for both of us if I DON'T become an expert at posting objections.
Seconded!
ASKER
Hi, tommyBoy:
i definitely like to give you the highest points for your help on this matter. If having not received yet, please advise me of what need to be done. Thanks.
pinyin 3665
i definitely like to give you the highest points for your help on this matter. If having not received yet, please advise me of what need to be done. Thanks.
pinyin 3665
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
I'm not a programmer by profession, it's just a hobby, so I don't mind working on these little challenges when I have the time. I just want to know if it's for a cause other than just your own amusement.