Løsningsforslag til kapittel 7

Her finner du løsningsforslag, råd og vink til oppgavene i kapittel 7.

7.2.1 Legg for eksempel følgende kode inn mellom <head> og </head> i oppgave 6.4.4 for å endre fonter til lista som skrives ut når du har registrert en bestilling:
<style>
    ul{
        font-family:Baskerville, "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", serif;
    }
</style>

7.2.2 Bruk for eksempel denne font-family for å få fonter uten seriffer: 
font-family:"Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;

7.2.3 Bruk CSS koden (<style>...</style>) midt på side 156 til å justere utseendet.

7.2.4 Følg oppskriften på side 157.

7.2.5 En nyttig lenke: https://uu.difi.no/

7.3.1 Et punktgrafikkbilde er satt sammen av små firkanter, kalt piksler eller bildepunkter. Disse pikslene blir tilsammen til et bilde.

7.3.2 d Du kan skalere opp igjen et bilde i størrelse, men da får du dårligere oppløsning og dermed et mer kornete bilde enn du hadde før du skalerte ned bildet.

 7.4.4 Når du lagrer et bilde med hvit bakgrunn som et png- eller gif-bilde kan du velge å gjøre den hvite bakgrunnen gjennomsiktig. Da framstår bildet som avgrenset til omrisset av det som ikke er satt til å være gjennomsiktig.
Man kan bruke CSS til å sette gjennomsiktighet ved å bruke egenskapen opacity. opacity: 0; betyr helt gjennomsiktig og bildet vises ikke. opacity: 0.5; betyr delvis gjennomsiktig og bildet vises dust. opacity:1; betyr ikke gjennomsiktig og bildet vises normalt.

7.4.6 Se eksempelet på side 173.

7.5.1 Her har jeg brukt SVG-Edit som er vist på side 178 til å tegne en Toyota-logo og hentet html-koden derfra:
<body>
    <svg width="640" height="480" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
        <!-- Created with SVG-edit - http://svg-edit.googlecode.com/ -->
        <g>
            <title>Layer 1</title>
            <g id="svg_5">
                <ellipse stroke="#000000" ry="73" rx="128" id="svg_2" cy="77" cx="134" stroke-width="5" fill="none"/>
                <ellipse stroke="#000000" ry="39.5" rx="103" id="svg_1" cy="46.5" cx="136" stroke-width="5" fill="none"/>
                <ellipse stroke="#000000" transform="rotate(90 133.50000000000003,78.00000000000001) " id="svg_4" ry="25" rx="70" cy="78" cx="133.5" stroke-width="5" fill="none"/>
            </g>
        </g>
    </svg>
</body>

7.6.2 a, b og c For å se startbildet må du ta bort autoplay sist i video-elementet nedenfor.
<body>
    <h1>Min video</h1>
    <video src="VideoDemo.mp4" width="640" height="400" poster="startBilde.jpg" controls autoplay></video>
</body>

7.6.3 Se side 181 og 182.

7.7.1-4 Her er kode for oppgave 1 til 4 samlet:

    <style>
        .rng{
            width: 1280px;
        }
    </style>
</head>

<body>
    <video id="minFilm" src="Presidents.mp4" type="video/mp4"></video>
    <div width="1280px">
        <input id="inpRange" type="range" class="rng" min="0" max="100" value="0">
    </div>
    <div>
        <button id="btnSpolTilbake">-Tilbake 5 sek-</button>
        <button id="btnSpolFram">-Fram 5 sek-</button>
        <button id="btn10">10 Kennedy</button>
        <button id="btn9">9 Polk</button>
        <button id="btn8">8 Johnsen</button>
        <button id="btn7">7 Eisenhower</button>
        <button id="btn6">6 Wilson</button>
        <button id="btn5">5 Jefferson</button>
    </div>
    <script>

        var inpRange = document.getElementById("inpRange");
        inpRange.onchange = function(){
            var totalTid = minFilm.duration;
            var inpTall = Number(inpRange.value);
            minFilm.currentTime = ""+totalTid*inpTall/100;
            minFilm.play();
        }
        function visFra(evt){
            var knapp = evt.target;
            if(knapp.id==="btn10"){
                minFilm.currentTime = 6;
            }
            else if(knapp.id==="btn9"){
                minFilm.currentTime = 52;
            }
            else if(knapp.id==="btn8"){
                minFilm.currentTime = 79;
            }
            else if(knapp.id==="btn7"){
                minFilm.currentTime = 135;
            }
            else if(knapp.id==="btn6"){
                minFilm.currentTime = 181;
            }
            else if(knapp.id==="btn5"){
                minFilm.currentTime = 206;
            }
            else if(knapp.id==="btnSpolTilbake"){
                minFilm.currentTime = minFilm.currentTime-5;
            }
            else if(knapp.id==="btnSpolFram"){
                minFilm.currentTime = minFilm.currentTime+5;
            }
            minFilm.play();
        }
        btn10.onclick = visFra;
        btn9.onclick = visFra;
        btn8.onclick = visFra;
        btn7.onclick = visFra;
        btn6.onclick = visFra;
        btn5.onclick = visFra;

        btnSpolTilbake.onclick = visFra;
        btnSpolFram.onclick = visFra;
    </script>
</body>

7.7.5 Bruk koden til 7.7.1-4 ovenfor og kode fra side 187-189 som utgangspunkt for å få til funksjonaliteten som etterspørres i oppgaven.

7.8.1 Legg lydfilene i samme mappe som html-fila.
<body>
    <audio id="lydRiktig" src="riktigsvar.mp3"></audio>
    <audio id="lydFeil" src="feilsvar.mp3"></audio>
    <p>Hva heter kapteinen i Peter Pan til etternavn?</p>
    <input id="inpSvar">
    <button id="btnSvar">Svar</button>
    <script>
        var inpSvar = document.getElementById("inpSvar");
        var btnSvar = document.getElementById("btnSvar");
        var lydRiktig = document.getElementById("lydRiktig");
        var lydFeil = document.getElementById("lydFeil");
        btnSvar.onclick=function(){
            if(inpSvar.value==="Krok"){
                lydRiktig.play();
            }
            else{
                lydFeil.play();
            }
        }
    </script>
</body>

7.8.2 Her bør du bruke et bilderedigeringsprogram til å tilpasse bildene.

<body>
    <div>
        <img id="imgHund" src="hund.jpg" width="100">
        <img id="imgKatt" src="katt.jpg" width="100">
        <img id="imgFugl" src="fugl.jpg" width="100">
    </div>
    <audio id="audBjeff" src="bjeff.mp3"></audio>
    <audio id="audFugl" src="fugl.mp3"></audio>
    <audio id="audKatt" src="katt.mp3"></audio>
    <script>
        var imgHund = document.getElementById("imgHund");
        var imgKatt = document.getElementById("imgKatt");
        var imgFugl = document.getElementById("imgFugl");
       
        imgHund.onclick = function(){
            audBjeff.play();
        }
        imgKatt.onclick = function(){
            audKatt.play();
        }
        imgFugl.onclick = function(){
            audFugl.play();
        }
    </script>
</body>

7.8.3
<body>
    <div>
        <button id="btnTrekkLyd">Spill lyd</button>
        <img id="imgHund" src="hund.jpg" width="100">
        <img id="imgKatt" src="katt.jpg" width="100">
        <img id="imgFugl" src="fugl.jpg" width="100">
    </div>
    <audio id="audBjeff" src="bjeff.mp3"></audio>
    <audio id="audFugl" src="fugl.mp3"></audio>
    <audio id="audKatt" src="katt.mp3"></audio>
    <audio id="audRiktig" src="riktigsvar.mp3"></audio>
    <audio id="audFeil" src="feilsvar.mp3"></audio>
    <script>
        var btnTrekkLyd = document.getElementById("btnTrekkLyd");
        var imgHund = document.getElementById("imgHund");
        var imgKatt = document.getElementById("imgKatt");
        var imgFugl = document.getElementById("imgFugl");
        var tilfeldigtall;
        btnTrekkLyd.onclick=function(){
            tilfeldigtall = Math.floor(Math.random()*3);
            if(tilfeldigtall===0){
                audBjeff.play();
            }
            else if(tilfeldigtall===1){
                audFugl.play();
            }
            else{
                audKatt.play();
            }
        }
        imgHund.onclick=function(){
            if(tilfeldigtall===0){
                audRiktig.play();
            }
            else{
                audFeil.play();
            }
        }
        imgFugl.onclick=function(){
            if(tilfeldigtall===1){
                audRiktig.play();
            }
            else{
                audFeil.play();
            }
        }
        imgKatt.onclick=function(){
            if(tilfeldigtall===2){
                audRiktig.play();
            }
            else{
                audFeil.play();
            }
        }
    </script>
</body>

7.8.4
<body>
    <script>
        window.onclick = function(evt) {
            var frequency = evt.clientX;
            var ac = new AudioContext();
            var osc = ac.createOscillator();
            osc.frequency.value = frequency; 
            osc.connect(ac.destination);
            osc.start(ac.currentTime);
            osc.stop(ac.currentTime+0.2);
        }
    </script>
</body>

7.8.5
<script>
    var arrToner=[262,294,330,349,392,440,494,523];
    var ac = new AudioContext(); //1. Web Audio API
    for(var i=0;i<arrToner.length;i++){
        var oscillator = ac.createOscillator(); //2. Oscillatoren
        oscillator.connect(ac.destination); //3. Kopler til forsterkeren
        oscillator.frequency.value=arrToner[i];
        oscillator.start(i); //4. Starter lyden
        oscillator.stop(i+1); //5. Stopper lyden etter 1 sekunder
    }
</script>