drapak.ca - Computer Programming 12: Defuse the Bomb!

Resources

//PROCESS: if...else conditionals
//OUTPUT: Changing an image

Saving your work

Use Save as... to save the empty template as "2.07S-DefuseTheBomb-LastName.html" in your Computer Programming 12 directory.

The assignment

Use to conditionals to change an image depending upon whether the user enters the correct number.

For example

Oh my gosh! You have to defuse the bomb!

Which wire do you cut? Enter 1, 2, 3, or 4:

Show me the code!

Nope! I won't!

I will give you some code to get started, but you will have to replace the ???????? with the real code.

After that you should experiment with the code to make it do new things.

<body>
    <img 
        id="bombImageId" 
        alt="Oh noes! A bob-omb!"
        src="http://drapak.ca/cpg/img/nicePictureOfABomb.png">
    
    <p id="instructionsId">
        <strong>Oh my gosh! You have to defuse the bomb!</strong>
    </p>
    
    <p>
        Which wire do you cut? Enter 1, 2, 3, or 4:
        <input id="inputId" type="text">
        <button id="buttonId">Cut carefully!</button>
    </p>
    
    <script>
        var mainProcedure = function() {
            console.log( 'in mainProcedure...' );
            
            //INPUT: read the wire number that the user is going to cut
            ???????? wireNum    = document.getElementById( "inputId" ).value;
            
            //PROCESS: choose what to do depending on which wire number was chosen
            
            //IF: wire number one was chosen, the defusing wire
            if ( wireNum == 1 ) {                   
                //OUTPUT: replace #bombImageId with image of defused bomb
                document.getElementById( "bombImageId" ).src    
                    = "http://drapak.ca/cpg/img/defusedBomb.png";
            
            //IF: wire number two was chosen, the exploding wire 
            } else if ( ???????? ) {
                //OUTPUT: replace #bombImageId with image of exploded bomb
                document.getElementById( "bombImageId" ).src    
                    = "http://drapak.ca/cpg/img/explodedBomb.png";

            //IF: wire number three OR four was chosen, then do nothing
            } else if ( ( ???????? ) || ( wireNum == 4 ) ) {    // NOTE: "||" means "or"
                //OUTPUT: replace #bombImageId with image of still ticking bomb
                document.getElementById( "bombImageId" ).src    
                    = "http://drapak.ca/cpg/img/stillActiveBomb.png";
            
            //ELSE: no valid wire is chosen
            } ???????? {                                // 
                //OUTPUT: display additional instructions
                var outputInstructions  
                    = "Enter the <strong>number</strong> " 
                    + "of the wire that you will cut.<br>"
                    + "One wire will defuse the bomb, two of them will do nothing, " 
                    + "and one will trigger it.<br>" 
                    + "Good luck!"; 
                    
                document.getElementById( "instructionsId" ).innerHTML   = ????????;
            }
        }
        
        //INPUT: trigger mainProcedure whenever #buttonId is clicked or #inputId changes
        //NOTE: document.querySelector() is the same as 
        //      document.getElementById, but it uses CSS-style selectors, 
        //      such as: #exampleId
        document.querySelector( '#buttonId' ).onclick   = mainProcedure;
        document.querySelector( '#inputId' ).onchange   = mainProcedure;
    </script>
</body>