Innlegg på fysikermøtet 9-12 august 2003, parallellsesjon Norsk fysikklærerforeningen (10.8 kl.1500). Nettadresse til fysikermøte: http://www.fys.uio.no/fysikermote/index.html

 

Hvordan øke fysikkforståelsen ved hjelp av animerte web-dokument

Abstract: Mange fysikkbegrep (bølge, strøm, induksjon, oa.) er dynamiske og derfor vanskelig å fremstille ved hjelp av figurer eller bilder på vanlige statiske boksider. Andre fysikkbegrep forutsetter en forståelse for tredimensjonelle strukturere som er vanskelig å fremstille på vanlig papir eller på ei tavle (eks magnetisme, termiske bevegelser, molekylstrukturer ol. ). Løsningen på slike problem kan være å lage enkle GIF-animasjoner eller interaktive HTML-former som kan samles til et slags figurbibliotek som kan brukes i forbindelse men vanlig undervisning eller elevaktiviteter. Om kildekoder og tips i forbindelse med konstruksjon av slike figurer gjøres lett tilgjengelig er det også mulig at elevene selv kan engasjeres til å lage forbedringer og dermed få dypere innsikt i de fysiske fenomenene som ligger bak.

Innhold:

  

7.8.03 Erling Skaar

 

 

1 Veksle mellom to bilder/figurer

Mange fysikkfenomen har to tilstander og i slik tilfeller er mouse-over-effekten nyttig. Her følger noen eksempler sammen med den enkle HTML-kode som forårsaker den aktuelle mouse-over-effekten.

  

Magnetisk tiltrekning  Magnetisk fraskyving

Kildekode:
<A onmouseover="fig10.src='navn2.gif'" onmouseout="fig10.src='navn1.gif'" href="#">
<IMG src="navn1.gif" border=0 name=fig10>
</A>

(Det som er markert med rødt er den koden som sørger for at html-koden viser ett bilde. Resten er da det som må tilføyes for at mouse-over-effekten skal fungere. Den aktuelle koden vil fungere i alle nye nettlesere. Merk at to filer pr figurer må kopieres med når dokumentet kopieres og det andre av disse bildene vil ikke vil da først lastes ned fra nettsiden når muspekeren plasseres på figuren. Det betyr at mouse-over-effekten blir litt treg første gang. Som det ene eksemplet ovenfor viser, så kan gjerne en av figurene være en animert gif-fil.)

2 Veksle mellom flere bilder/figurer

I fysikksammenheng er det mange ganger nyttig å vise bilde eller figurer av mange ulike tilstander og i slike sammenhenger er det aktuelt å bruke et såkalt bildeshow. I dette enkle eksemplet brukes form-input med to input-knapper og et par små javascript. Det betyr at nettleseren må har tilgjengelig javascript-kompilator, som da er vanlig.

 

fra:

Kaldere Varmere

<img src="../pu02/emfig21a.gif" name=bildeshow>
<SCRIPT language=JavaScript>
 var peker=2;
 var bilde=new Array();
 bilde[1]="../pu02/emfig20.gif";
 bilde[2]="../pu02/emfig21a.gif";
 bilde[3]="../pu02/emfig22a.gif";
 bilde[4]="../pu02/emfig23a.gif";
function forrige(){
  if (peker > 1){
    peker --;
    document.bildeshow.src=bilde[peker]}}
function neste(){
  if (peker < bilde.length-1){
    peker ++;
    document.bildeshow.src=bilde[peker]}}
</SCRIPT>

Kaldere <INPUT onclick = forrige() type=button value=" < " >
<INPUT onclick = neste() type=button value=" > " > Varmere

(Programeksemplet viser at filnavnene til bildene legges inn i en tabell manuelt i java-script-delen som er markert med rødt. Det betyr at man må ha en linje pr bilde i tillegg til de andre linjene som har mer generell karakter og disse trenger man vanligvis ikke å endre. Merk at det vil ta litt ekstra tid første gangen et nytt bilde kommer fram fordi det først må lastes ned fra nettsiden.)

 

Map-aktivisert animasjon: I det følgende eksemplet brukes mouse-over sammen med en map-oppdeling av bildet som gir gode muligheter for å styre raske eller seine animasjoner ved hjelp av muspekeren. Ulempen er kanskje at kombinasjonen av javascript med forhånds-loading av bilder og bilde-maping betyr forholdsvis mye programkoding. Men det er da mulig å kopiere koden mellom ulike dokument og så kun endre deler av koden.

<body ............ onLoad="hentbilder();">

<p><img src="../../it/web/JA01.jpg" name=b2 border="0" usemap="#bilde2deler">
<SCRIPT language=JavaScript type=text/javascript><!--
function hentbilder(){
//når "event-handleren" onLoad starter funksjonen vil nettside overføres før "ekstrabildene"
 if (document.images) { //Om nettleser takler bilder, hentes "ekstrabilder" fra nettserver
  l0=new Image(); l0.src='../../it/web/JA01.jpg';
  l1=new Image(); l1.src='../../it/web/JA01.jpg';
  l2=new Image(); l2.src='../../it/web/JA02.jpg';
  l3=new Image(); l3.src='../../it/web/JA03.jpg';
  l4=new Image(); l4.src='../../it/web/JA04.jpg';
  l5=new Image(); l5.src='../../it/web/JA05.jpg';
  l6=new Image(); l6.src='../../it/web/JA06.jpg';
  l7=new Image(); l7.src='../../it/web/JA07.jpg';  }}
function skift(bilde,lerret) {  //funksjonen legger nytt "lerret" i angitt skjermbilde
 if (document.images) document.images[bilde].src = eval(lerret + ".src"); }
//--></SCRIPT>

<map name="bilde2deler">
<area onmouseover="skift('b2','l1')" shape="rect" coords="214, 83, 248, 99" >
<area onmouseover="skift('b2','l2')" shape="rect" coords="214, 70, 248, 82" >
<area onmouseover="skift('b2','l3')" shape="rect" coords="214, 56, 248, 69" >
<area onmouseover="skift('b2','l4')" shape="rect" coords="214, 42, 248, 55" >
<area onmouseover="skift('b2','l5')" shape="rect" coords="214, 27, 248, 41" >
<area onmouseover="skift('b2','l6')" shape="rect" coords="214, 14, 248, 26" >
<area onmouseover="skift('b2','l7')" shape="rect" coords="214,  1, 248, 13" >
</map> 

 

3 Bruk av animerte gif-filer

Ved hjelp av ulike grafikkprogram er det mulig å lage ei bildefil som består av mange ulike bilder og når man betrakter denne ved hjelp av en nettleser vil de skje en automatisk veksling mellom de ulike bildene på en på forhånd bestemt måte. De eksemplene som følger består av et avgrenset antall bilder som veksler kontinuerlig og siden vekslingen går relativt fort får vi en såkalt animasjon.

3a Eksempel strøm

Figurene til venstre viser to vanlige gif-animasjoner med 4 ulike bilder. Disse representerer da to ulike strømdefinisjoner. I fysikken bruker vi ofte begrepet strøm i betydning ladningstransport hvor man tenker at det er positive ladninger som forflytter seg, selv om det i virkeligheten er negative ladninger som beveger seg. De røde kulene representerer da tenkte positive ladnininger som går gjennom ledningene.

På den andre siden vil man i dagliglivet vanligvis tenke på energi når man snakker om strøm. Vi betaler f.eks. for den strømmen vi får fra energiverket. I dette tilfellet er det altså snakk om noe som overføres langs to ledninger fra produsent til forbruker. Selv om det ikke er snakk om kvantifiserte partikler slik som de grønne sirklene antyder, så kan man likevel si at den aktuelle strømmen eller energien er noe som overføres via to ledninger fra f.eks. et batteri til ei lyspære slik som figuren antyder.

Bør vi presentere begge disse strømdefinisjonene for elevene våre? Erfaring har vist at den ovennevnte tvetydigheten i begrepet strøm skaper store problemer for elever og det er mye som tydet på at dette og andre tilsvarende problem er årsaken til at mange velger bort fysikk. Kanskje fordi mange fysikklærere ikke er klar over problemet og følgelig ikke forstår den frustrasjonen mange elever opplever når de har en annen tolkning av et begrep enn det læreren tror de har.

 

3b Eksemplet elektrisk og magnetisk energi

Energi er et grunnleggende begrep i naturen og mye tyder på at en forståelse for dette begrepet er grunnleggende. Det vi mennesker ikke forstår vil vi vanligvis styre unna det som forvirrer oss. Om vi derimot opplever at vi har klart å plassere tanken på et sett av stabile grunnbegrep, er det mye større sjanse for at nysgjerrighet og følelsen av å mestre ting vil gjøre at vi videreutvikler den aktuelle kunnskapen. Bakgrunnen for alt som skjer i naturen er energi, og en forståelse for hva energi egentlig er vil sannsynligvis føre til at flere blir interessert i fysikk som vel handler om å forstå naturen.

I prinsippet finnes det to måter å lagre energi og sannsynligvis er det en elektromagnetisk begrepsverden som representerer den beste rammen for energiforståelse. På den ene siden kan man lagre energi i et slags fjærsystem /kraftfelt (potensiell energi) hvor prinsippet er at man fører f.eks. ladninger i motsatt retning av hva som er naturlig for ladningen. Det skjer da når vi lader opp en kondensator som illustrert på figuren nedenfor. Inne i den aktuelle kondensatoren blir det så en slags opphoping av elektriske felt mellom platene i kondensatoren og vi kan da kalle den aktuelle energien for elektrisk energi. Vi kan da få frigjort denne energien ved f.eks. å koble en lysdiode til kondensatoren.

 

Den andre energiformen kalles kinetisk energi og denne er knyttet til farten til ulike fysiske størrelser. Jo mer fart, jo større energi. I figuren over til høyre leverer et batteri strøm til en spole som et tvunnet omkring en jernstav. I prinsippet er det nok med et batteri og den røde ledningen, men jernstaven, den blå spolen og ampermeteret er da med for å kunne påvise induksjon. Induksjonen viser da at det finnes energi i/omkring den røde spolen når det går strøm gjennom den. Noe av denne energien vil nemlig forflytte seg over til ampermeteret når strømmen slåes på og av. Det er vel ikke vanlig i fysikkbøker å betegne slik magnetisk energi for kinetisk energi, men i det følgende vil vi kort skissere hvordan dette kan forklare noen vanlige forståelsesproblem som elever ofte strir med.

Hvorfor oppstår strøm i naboledninger i en transformator?

En nærliggende måte å forklare induksjonsforsøket ovenfor er å tenke seg at det elektriske feltet fra elektronene som beveger seg gjennom primærspolen vil påvirke de nærmeste ladningene (positive ladninger) som vil begynne å dreie på samme måten som tannhjul som overfører dreieenergi når de er hektet sammen. Feltet fra disse vil så påvirke andre ladninger og etter to eller flere slike energioverføringer vil så elektronene i nabolederen bli påvirket. I det tilfelle man har likestrøm, vil de aktuelle elektronene lagre energien som dreiing slik som figuren under til venstre antyder. I tilfellet der det er snakk om vekselstrøm i primærspolen, vil man derimot få indusert vekselstrøm i sekundærspolen som da kan måles ved hjelp av ampermeteret. Når man putter en jernkjerne inn i slike spoler blir det flere ladninger som svinger med og dermed blir det også mer energi overført til sekundærspolen.

Ved likestrøm lagres energi i dreiing i naboledning

Ved vekselstrøm induseres vekselstrøm i naboledning

Hva er årsaken til treghet?

I litteratur hvor man f.eks. forklarer hvorfor et strømbrudd i primærspolen vil skape store spenninger og gnist i sekundærspolen  (coil) hender det at man bruker ordet treghet. Treghet kan for eksempel beskrives som en energi som er knyttet til alt som beveger seg og som vil gjøre seg gjeldene når man prøver å tarte eller stoppe bevegelsen. Energien vil da motvirke alle fartsendringer. Når det gjelder treghet i mekanikken, så er det imidlertid sjeldent at man leser forsøk på å forklare denne selv om mange elever ofte lurer på hva slags krefter det er som gjør at ting fortsetter når de først har fått fart. I noen tilfeller kan man høre at slik treghet ikke kan eller skal forklares, men bare aksepteres. Kanskje er slike påstander er medvirkende årsaker til at så få velger fysikk.

I ulike sammenhenger har jeg argumentert for å beskrive magnetisme som en dynamisk størrelse, ikke statisk ved å bruke B-felt eller poler. ( En enklere og bedre forklaring av magnetismen?) Her vil jeg da bare kort nevne at det er endel likhetspunkter mellom induksjon og mekanisk treghet slik den er uttrykt gjennom Newtons 2. lov. Men for at man skal kunne se denne likheten trenges sannsynligvis noen animerte figurer og kanskje også litt mindre dogmatisme enn det jeg har opplevd i noen fysikkmiljø. Jeg arbeider med et prosjekt kalt fysikkforståelse og planen er å komme tilbake til en mer utførlig beskrivelse av em-modellen i en annen sammenheng, men her vil jeg bare kort prøve å vise hvordan enkle animerte figurer kan være med å forklare hva magnetisme egentlig er.

En hovedforskjell mellom induksjonsfenomen og mekanisk treghet, er at induksjon virker over kort avstand mens treghet virker over lengere avstander. Universet består av positive og negative ladninger og når disse kommer nær hverandre vil vi kunne erfare induksjonsfenomen fordi ladninger "føler" det elektriske feltet fra naboladninger. I prinsippet er det ingen grense for hvor langt feltet fra en ladning rekker, og på figuren nedenfor til venstre har vi illustrert feltet fra mange ladninger som parallelle streker. Ladninger som beveger seg gjennom dette feltet (eteren), vil da trekke feltet litt med seg med det resultatet at det "slår tilbake" litt lenger unna. Figuren til høyre er da et forsøk på å tegne det samme fra en magnetisk synsvinkel. De orange pilene viser da hvilke veg det elektriske feltet beveger seg omkring ladningene, og det er da mulig å tenke seg at det er denne bevegelsen i det elektriske feltet som får ladningene til å fortsette framover. Magnetismen er altså ikke et eget felt, men en bevegelse i det elektriske feltet som representerer en energi som følger elektronet. Vanlige mekaniske gjenstander består så i sin tur av mange ladninger, men det aktuelle prinsippet vil fortsatt gjelde.

elektrisk-felt:

magnetisme-bevegelse:

 

Bølger uten et medium - for dem som ikke trenger å forstå?

Som fysikklærer har jeg ofte møtt elever og studenter som har unngår fysikk fordi de synes den er vanskelig å forstå. Derfor har jeg brukt mye tid på å prøve å  utvikle gode forklaringer for om mulig å imøtekomme disse. Men jeg har etterhvert innsett at med bakgrunn i "akseptert fysikk" det er mye som er umulig å forklare på en måte som gjør at det elevene/studentene som tenker blir fornøyd. Jeg har derimot opplevd at mange klassiske forklaringene på ulike fysikkfenomen i prinsippet fungere bra. Problemet er imidlertid at det finnes endel mennesker som tilsynelatende vet at disse klassiske forklaringene er feil selv om de ikke kan forklare hvorfor. Av en eller annen grunn så har de også tilsynelatende større autoritet enn de som har en mer ydmyk holdning til det vi vet om naturen. Når så elevene/studentene får valget mellom å tro det de forstår eller det som "ekspertene" sier, så velger mange å studere noe annet enn fysikk. Animasjonen nedenfor er i denne sammenhengen med som et eksempel på at det er relativt lett å forklare ulike lysfenomen om man antar at det finnes en eter som lys kan bevege seg gjennom, men når det tilsynelatende ikke er akseptert å bruke slike forklaringsmodeller, så får man vel heller bare akseptere at fysikk ikke lenger er et emne i grunnskolen og et fag med stadig mindre søknad i videregående skole.

 

 

4 Interaktiv grafikk vha. PHP

Statisk grafikk
Grunnlaget for å kjøre eksemplene ovenfor er en nettleser med javascript-kompilator som er vanlig i de tusen hjem. Den aktuelle HTML-fila sammen med de ulike blidefilene (gif, jpg, png) kan da hentes fra nettet eller fra en diskett/CD. Poenget er altså at det er lett å bruke og spre slike dokument i en undervisningssammenheng.

Bakgrunnen for å lage slike sider er da en editor. Jeg har brukt Namo-Web-Editor som jeg er godt fornøyd med, men det er også mulig å skaffe seg gratis web-editor som Mozilla Composer oa. I tillegg trennger man litt kunnskap om HTML og Java-script. Vanligvis er det nok å studere noen ferdige koder slik som de som finnes på denne siden og så kopiere og tilpasse dem til inn i egne web-dokument. I tillegg til en teksteditor trenger man også et grafisk program og jeg har da brukt Paint-Shop-Pro som jeg er godt fornøyd med. Det inneholder blant annet  en animasjonsmodul som jeg har brukt for å lage de ulike animerte gif-filene. Også i dette tilfellet finnes det gratis alternativ som f.eks. Gimp og selv vurderer jeg å gå over til å bruke dette programmet, men problemet er at når man først har lært seg et program, så er det enklest å fortsette å bruke det framfor å sette seg inn i et nytt.

Hovedforskjellen mellom det som er vist ovenfor og det vi finner i ei bok er vel animasjonene som også er statiske i den forstand at brukeren ikke kan gjøre endringer i dem. Generelt kan vi da si at figurer og tekst som er vist ovenfor er "ferdigtygd" og det er derfor relativt lite brukeren kan gjøre bortsett fra å prøve å tilegne seg det som er presentert. 

Interaktiv grafikk
Et viktig kjennetegn på skolefaget fysikk er at man kan gjøre forsøk. Dette svarer til interaktivitet i data-sammenheng. Det er derfor et ønske om å lage interaktive fysikkdokument hvor brukeren kan eksperimentere ved å legge inn egne verdier/forutsetninger og så få en direkte tilbakemelding om hva som skjer. På internett finnes endel Java-applets som er som ofte er både interaktive og animerte. Ulempen med disse er på den ene siden at det kreves endel programmeringskunnskap for å lage dem og dessuten er de mindre fleksible i forhold til å overføre dem mellom ulike maskiner med og uten internettilkobling.

PHP er et relativt nytt og populært verktøy i internettsammenheng og generelt kan man vel si at det er en slags utvidelse av HTML hvor interaktivitet er et hovedmål. Hovedfordelen med dette verktøyet er at det er relativt lett å lage PHP-dokument (en slags utvidelse av HTML) samtidig som det er lett og overføre dem mellom ulike maskiner. Det er viktig å forstå forskjellen på et HTML-dokument og et PHP-dokument. Om vi endrer HTM(L) til PHP i filnavnet så har vi i praksis et PHP-dokument som kan leses av en nettleser. En slik navnendring har liten hensikt i seg selv, men om vi så setter inn noen ekstra PHP-koder vil en ny verden åpne seg. Figuren til venstre viser at vår lokale nettbrowser (Mozilla, Explorer..) kan lese en HTML-fil direkte og det er altså ikke nødvendig at vil får HTML-fila via en nettserver. Når det derimot gjelder PHP-filer, så må disse "forbehandles" før det sendes til browseren. I praksis betyr det at nettstedet må ha aktivisert PHP-kompilatoren. Om man sitter på en enslig PC uten nettilkobling, så må man tilsvarende aktivisere et nettserverprogram lokalt  i tillegg til nettbrowseren. Selv har jeg da prøvd dette i Linux der alle nødvendige program var ferdig installert på den aktuelle Linux-distribusjonen jeg bruker (SuSE 8.2). For å kunne eksperimentere med PHP er det  da bare snakk om å starte to program (httpd(Apache) og Mozilla/Concuror..)  i tillegg til en editor. Fordelen med Linux er ellers at man slipper å betale for programmene og mitt inntrykk er ellers at disse programmene fungerer bedre i Linux-sammenheng enn i Windows-sammenheng.

Vanligvis vil bare HTML-delen av PHP-filene være synlig for brukeren via Vis-kode-funksjonen i en nettbrowser. Nedenfor følger hele innholdet av de to filene som ligger bak det første eksemplet. Poenget med det aktuelle oprogrammet er å få fram den prinsipielle virkemåten,  parameteroverføringen, bruk av matematiske operatorer og noen enkle grafiske funksjoner. En komplett oversikt og PHP finnes da på nettsiden http://www.php.net/. Virkemåten til selve programmet er da at man skriver inn utgangshastighet i m/s og vinkel i grader og så får man tegnet ut en prosjektilbane når man klikker på knappen.

test6.php:

<html><head><title>test6</title></head><body>
<?php
if (!isset($HTTP_POST_VARS['p0'])) {
 $HTTP_POST_VARS['p1']=' 25';
 $HTTP_POST_VARS['p0']=' 80';}
?>

<form action="
<?php echo $HTTP_SERVER_VARS['PHP_SELF']; ?>" method="post">
Fart:<input type="text" name="p1" size="3" value="<
?php echo $HTTP_POST_VARS['p1'];?>">
Vinkel:<input type="text" name="p0" size="3" value="
<?php echo $HTTP_POST_VARS['p0'];?>">
<input type="submit"  value="Trykk"> <br>
</form>
<img src="test6b.php?
<?php echo 'p1='.$HTTP_POST_VARS['p1'].'&p0='.$HTTP_POST_VARS['p0'];?>">
</body></html>

(Det som er markert med rødt er PHP-koder, resten er HTML)

 

test6b.php:

<?php
Header("Content-Type: image/png");
 $vinkel=$_GET['p0'];
 $fart=$_GET['p1'];
$im = ImageCreate(400,400);
$sort = ImageColorAllocate($im,  0,  0,  0);
$grey = ImageColorAllocate($im, 245,  250,  245);
ImageFill($im,2,2,$grey); //grå bakgrunn
$vx=$fart*cos($vinkel*pi()/180);
$vy=$fart*sin($vinkel*pi()/180);
$t=0;  
while ($t <= 400){ //maks 4 sekunder
 $x=($vx*$t)*10;  //formelen i parentes, resten skalering
 $y=400-($vy*$t-0.5*9.8*$t*$t)*10;
 ImageSetPixel($im,$x,$y,$sort); //tegne kurven
 $t=$t+0.01; // tidsinterval: 0,01 sekund
 }
ImagePNG($im);
ImageDestroy($im);
?>