dcsimg
www.webdeveloper.com
Results 1 to 8 of 8

Thread: Javascript Array the Functions

  1. #1
    Join Date
    May 2017
    Posts
    4

    Question Javascript Array the Functions

    Hello! In this code I am trying to figure out how to randomize the choice of an audio file to be placed into a div. Then have a matching picture for the audio file be placed in a random div of div1 through div4. However, I want the rest of the divs to be filled with random pictures.

    Here is my draft code, mainly used to just get a general idea of how to go about things since I am really new to javascript.
    Code:
    var array_functions = [
    	function_one,
    	function_two,
    	]
    	
    	var audio_1 = []
    	audio_1[0] = new Audio();
    	audio_1[0].src = "MusicNote1.mp3";
    	audio_1[0].play();,
    	
    	audio_1[1] = new Audio();
    	audio_1[1].src = "MusicNote2.mp3";
    	audio_1[1].play();
    	
    	var rand_audio_1 = audio_1[Math.floor(Math.random()*audio_1.length)];
    	
    	function div_if(){
    		if(function_one === audio_1[0]){
    			var rand_div_1 = ["div1","div2","div3","div4"];
    			for(var i=0;i<rand_div_1.length;i++){
    				document.getElementById(rand_div_1[i].innerHTML(pict);
    				pict.src='MusicNote1.gif';
    			}
    			else if {
    				if(function_one === audio_1[1]){
    			var rand_div_1 = ["div1","div2","div3","div4"];
    			for(var i=0;i<rand_div_1.length;i++){
    				document.getElementById(rand_div_1[i].innerHTML(pict);
    				pict.src='MusicNote2.gif';
    			}
    			else {
    				document.getElementById(rand_div_1[i].innerHTML("Error");
    			}
    				}
    			}
    		}
    	}
    and here is the webpage where this code will be mainly used: http://driglight.com/Learn3.html

    Thank you very much for your time and help!

  2. #2
    Join Date
    Jul 2013
    Posts
    46
    did not read what you did but what you want to do is put the matching images and sounds in an array and put them arrays in another array then just have a random number the length of the array -1 to get a random matching sound and image (indexs start at 0 and lengths start at 1)
    then you also have a different array of the divs and get a random index for one of them and there you go

    if this is just something that will run once than you can splice out the things that have already been picked do you dont add 2+ sets of things to the same div or to 2 different divs otherwise if you do want it to run more than once you can add the picked indexes to a list so you can check if it has already been used then simply clear the list when done

  3. #3
    Join Date
    May 2017
    Posts
    4

    Great concept! How do I put it in code again? XD

    Thank you very much! How would I go about putting audio files and images into an array? I have the audio in its own array because I don't' have a clue how to go about putting audio, or files in general, into an array. I'm guessing that from what you said I should work on getting MusicNote1.mp3 and MusicNote1.gif into the same array and then MusicNote2.mp3 and MusicNote2.gif into their own array as well. Then have an array which holds the arrays of the matches and randomize the choice from that. Then make an array of the divs and then make an array of the images. Have a function that makes sure the randomized images aren't put into the matched div while putting randomized images in the rest of the divs. I also need to make it so that every div that has an unmatched image will have an 'incorrect' div and every matched div will have a 'correct' div. <- I forgot about that part in the original question. Then making it run for each refresh of the page.

    Be sure to check out the page to make sure I didn't miss anything about the page by checking it out here: http://www.driglight.com/Learn3.html

  4. #4
    Join Date
    Dec 2012
    Posts
    1,540
    I don't' have a clue how to go about putting audio, or files in general, into an array
    It's not necessary at all to put the files into an array, it's sufficient if you use the URLs.
    I'm guessing that from what you said I should work on getting MusicNote1.mp3 and MusicNote1.gif into the same array and then MusicNote2.mp3 and MusicNote2.gif into their own array as well.
    I recommend putting them into one structure like this:
    Code:
    var data = [
        {music: "MusicNote2.mp3", image: "MusicNote2.gif"},
        {music: "MusicNote3.mp3", image: "MusicNote3.gif"},
        {music: "MusicNote4.mp3", image: "MusicNote4.gif"},
        {music: "MusicNote5.mp3", image: "MusicNote5.gif"},
        {music: "MusicNote6.mp3", image: "MusicNote6.gif"}
    ];
    Then you can easily get the mp3 and the corresponding image by a random index like this:
    Code:
    var randomidx = Math.floor(Math.random() * data.length);
    var randommusic = data[randomidx].music;
    var randomimage = data[randomidx].image;
    Besides this I'm not shure if I understand your intention correctly: Do you want the player to play a random music and the matching image is displayed beside or below the player? And you want some more random images being displayed?
    Last edited by Sempervivum; 05-10-2017 at 04:39 PM.

  5. #5
    Join Date
    May 2017
    Posts
    4
    Please look at this link because it is all I have to help my poor explanations: http://driglight.com/Learn3.html

    The goal of this page is to click the music controls and play a note. Then estimate the best answer from the images below. Once you click on the image you chose, a div will appear next to them telling you if your are correct or incorrect.
    What I want to do is make it so that when the page is loaded it will load a random music file, but when it does that it has to have the correct answer too. That means whichever random music file it picks(like MusicNote1.mp3), then I will need it to put MusicNote1.gif randomly into one of the divs that holds the images. However the other divs will also need images, so I will need to make a function that puts the rest of the images randomly into the remaining divs. However, to match the "incorrect" and "correct" divs to the randomly selected images placed in a div seems a bit daunting. i can go around that though.
    That means I should create a variable with the music audio(var musicAudio). Then create a function that says if a certain music file is picked(MusicNote1.mp3),then choose the matching image(MusicNote1.gif) and put that image in one of the random image divs, and then add to that function that whichever image div is picked in that function needs to have a "correct" div next to it.
    Then after getting that done, I will need to create a function that places images randomly into the remaining image divs /without putting them into the image div with the matching image(a.k.a. MusicNote1.gif)/.
    Then after getting all of that worked out, I need to make sure that it will run again after the page is refreshed and/or revisited.

    Sorry for the late reply! Thank you so much for your help

  6. #6
    Join Date
    May 2017
    Posts
    4
    Okay, so the part that really gets me is how to place the rest of the images randomly into the divs without overwriting the matching image. I would like to go about it by having whatever random div is chosen for the matching image(MusicNote1.gif) to be removed from the array of the other function which places the rest of the images randomly into the remaining divs. How I do that is ask the internet in desperation because I can generally visualize how it can work, but I have not yet mastered the language of code.

    Once again, Thank you very much for your time and effort!

  7. #7
    Join Date
    Dec 2012
    Posts
    1,540
    Tried clicking the images and now I understand your page a bit better. Now I understand your intention in this way:
    You want to set up the page dynamically instead of creating numerous static pages. The images you are talking about are the images on the left displaying one note each? Pick a random sound file and place the appropriate images. Seems to me that this would make sense.
    Last edited by Sempervivum; 05-12-2017 at 04:03 AM.

  8. #8
    Join Date
    Dec 2012
    Posts
    1,540
    Hope I understand you correctly now. I've created a demo page. Check whether it meets your needs:
    Code:
    <!DOCTYPE html>
    <html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Learn</title>
    </head>
    <body>
        <audio controls></audio>
        <div class="numberPage"></div>
    
        <div class="guesswrapper">
            <img class="note" />
            <img class="result" />
        </div>
        <div class="guesswrapper">
            <img class="note" />
            <img class="result" />
        </div>
        <div class="guesswrapper">
            <img class="note" />
            <img class="result" />
        </div>
        <div class="guesswrapper">
            <img class="note" />
            <img class="result" />
        </div>
        <button type="button" id="nextbtn">Next note</button>
        <style>
            .guesswrapper img.result {
                display: none;
            }
        </style>
        <script src="//code.jquery.com/jquery-1.10.2.js"></script>
        <script>
            var sounds = [
                { src: "http://driglight.com/HighETrebbleCleffPianoVC.mp3", id: "HighE" },
                { src: "http://driglight.com/HighFTrebbleCleffPianoVC.mp3", id: "HighF" },
                { src: "http://driglight.com/LowATrebbleCleffPianoVC.mp3", id: "LowA" },
                { src: "http://driglight.com/LowETrebbleCleffPianoVC.mp3", id: "LowE" },
                { src: "http://driglight.com/LowFTrebbleCleffPianoVC.mp3", id: "LowF" },
                { src: "http://driglight.com/LowGTrebbleCleffPianoVC.mp3", id: "LowG" },
            ];
            var noteimgs = ["notes/HighE.gif", "notes/HighF.gif", "notes/LowA.gif", "notes/LowE.gif", "notes/LowF.gif", "notes/LowG.gif"];
            function shuffle(a) {
                var j, x, i;
                for (i = a.length; i; i--) {
                    j = Math.floor(Math.random() * i);
                    x = a[i - 1];
                    a[i - 1] = a[j];
                    a[j] = x;
                }
            }
            shuffle(sounds);
            sounds.forEach(function(ele, i) {
                console.log(sounds[i])
            })
            var isound = 0
            var idcorrect = "";
            function newnote() {
                $("audio").attr("src", sounds[isound].src);
                $("audio")[0].play();
                idcorrect = sounds[isound].id;
                $(".numberPage").text(idcorrect);
                isound++;
                var matchingimg = "";
                var notmatchingimgs = noteimgs.filter(function (ele, idx) {
                    if (ele.indexOf(idcorrect) != -1) {
                        matchingimg = ele;
                        return false;
                    }
                    return true;
                });
                shuffle(notmatchingimgs);
                var guesses = $(".guesswrapper");
                var nrguesses = guesses.length;
                var icorrect = Math.floor(Math.random() * nrguesses);
                var inotmatching = 0;
                guesses.each(function (idx, ele) {
                    if (idx == icorrect) {
                        $(this).find(".note").attr("src", matchingimg);
                        $(this).find(".result").attr("src", "images/GoodJob.png");
                    } else {
                        $(this).find(".note").attr("src", notmatchingimgs[inotmatching++]);
                        $(this).find(".result").attr("src", "images/incorrect.png");
                    }
                    $(this).find(".result").css("display", "none");
                });
            }
            newnote();
            $("#nextbtn").on("click", function () {
                newnote();
            });
            $("img.note").on("click", function () {
                $(this).next("img.result").css("display", "block");
            })
        </script>
    </body>
    </html>

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center