Avatar of pinyin3665
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.
Scripting LanguagesJavaScript

Avatar of undefined
Last Comment
Tom Beck

8/22/2022 - Mon
Tom Beck

If you don't mind, can you explain to the EE experts just what you're up to? Are you an educator? Are you somehow profitting from the these scripts? You are obviously not attempting to learn javascript programming yourself. You don't even make an attempt at writing code even after being given working examples.

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.
pinyin3665

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
Tom Beck

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>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
</table>

<br>
<table class='mao'>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td><sup>2</sup></td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td><sup>2</sup></td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</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>

Open in new window

Experts Exchange is like having an extremely knowledgeable team sitting and waiting for your call. Couldn't do my job half as well as I do without it!
James Murphy
Tom Beck

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('&nbsp;');		
		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>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
</table>

<br>
<table class='mao'>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td><sup>2</sup></td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td><sup>2</sup></td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</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>

Open in new window

pinyin3665

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
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.
Get an unlimited membership to EE for less than $4 a week.
Unlimited question asking, solutions, articles and more.
Tom Beck

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.
pinyin3665

ASKER
where can i mark the score of 500 points?  this is a wonderful answer.  thanks.
Tom Beck

I believe the moderator will take care of it. Thanks.
I started with Experts Exchange in 2004 and it's been a mainstay of my professional computing life since. It helped me launch a career as a programmer / Oracle data analyst
William Peck
Tom Beck

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.)
Tom Beck

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.
Tom Beck

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.
Get an unlimited membership to EE for less than $4 a week.
Unlimited question asking, solutions, articles and more.
Modulus_Twelve

Seconded!
pinyin3665

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
ASKER CERTIFIED SOLUTION
Tom Beck

Log in or sign up to see answer
Become an EE member today7-DAY FREE TRIAL
Members can start a 7-Day Free trial then enjoy unlimited access to the platform
Sign up - Free for 7 days
or
Learn why we charge membership fees
We get it - no one likes a content blocker. Take one extra minute and find out why we block content.
Not exactly the question you had in mind?
Sign up for an EE membership and get your own personalized solution. With an EE membership, you can ask unlimited troubleshooting, research, or opinion questions.
ask a question