Trenger en programsnutt

pmonstad · 19. september 2008

Hei!

Har i dag laget en PowerPoint (!!) som viser 100 ord etter hverandre, med x-antall sekunders intervall. Poenget er at dette brukes til å gi elever i 2. klasse trening i å lese. Læreren velger hvor lenge hvert ord skal vises, og hvor lang tid det er mellom hvert ord. Kun ett ord om gangen på hvit bakgrunn.

Dette er lite fleksibelt, og jeg leker med tanken om å gjøre dette webbasert, noe som ikke burde by på veldig mye arbeid (?) for en som behersker php.

Er det noen som tror de er i stand til å snekre sammen noe slikt? Det enkleste er sikkert om disse 100 eller flere ordene hardkodes inn, det mest fleksible ville selvsagt være om man kan velge mellom en del forhåndsdefinerte ordlister (som allerede er lagt inn på serveren).

Dette er til ikke-kommersielt bruk, i skolesammenheng, så noe betaling kan jeg dessverre ikke tilby, med mindre det er snakk om en symbolsk sum og du har et registrert foretak som kan sende faktura.

--

Pål Monstad

pgdx · 21. september 2008

Det burde være den smaleste sak i verden. La ordene ligge i et array, ha en teller som inkrementeres hvert n millisekund.

Nå har jeg sett det finnes en god del slike på nett fra før av for hurtiglesing, men jeg kan ikke finne lenken.

pgdx · 21. september 2008

Ahah! Den som søker, skal finne: http://spreeder.com/

pmonstad · 21. september 2008

Ahah! Den som søker, skal finne: http://spreeder.com/

Jo, det er noe slikt jeg er på jakt etter, men med definerte ordlister brukeren kan velge mellom. Noen som kan lage et slikt skript?

Jonhoo · 22. september 2008

(Utestet) forslag til kode.. Tror det burde være et godt utgangspunkt ihvertfall =)

Det er ikke noe styling foreløpig, men alle de tre forskjellige elementene som brukes har hver sin ID:

select: select#ordlisteVelger

start-knapp: a#ordlisteVelgerKnapp

ord: p#ordViser

<script type="text/javascript">
	var tidPerOrd = 2000;

	var ordlister = new Array();
	ordlister['Enkle ord'] = new Array('ja', 'nei', 'ikke', 'pappa', 'mamma');
	ordlister['Middles vanskelige ord'] = new Array('kanskje', 'muligens', 'pølse', 'appelsin');
	ordlister['Vanskelige ord'] = new Array('gulrot', 'onomatopoetikon', 'rabarbrablader');
	// osv... nedover

	/* IKKE GJØR NOE UNDER HER */

	function displaySelect() {

			if ( document.getElementById ( 'ordlisteVelger' ) && document.getElementById ( 'ordlisteVelger' ) !== undefined ) {
					removePrevious();
			}

			var sel = document.createElement ( 'select' );
			sel.setAttribute ( 'id', 'ordlisteVelger' );
			for ( var ordliste in ordlister )
			{
					var option = document.createElement ( 'option' );
					option.innerHTML = ordliste;
					sel.appendChild ( option );
			}

			var ok = document.createElement ( 'a' );
			ok.setAttribute ( 'href', '#' );
			ok.setAttribute ( 'onclick', 'return doSelect( self );' );
			ok.setAttribute ( 'id', 'ordlisteVelgerKnapp' );
			ok.innerHTML = 'Start oppgaven';

			document.appendChild ( sel );
			document.appendChild ( ok );
	}

	var timer;
	function doSelect( ) {
			var sel = document.getElementById ( 'ordlisteVelger' );
			var idx = sel.options[sel.selectedIndex].value;

			removePrevious();
			showNextWord ( idx, 0 );
			return False; 
	}
	function removePrevious() {
			var word = document.getElementById ( 'ordViser' );
			if ( word == undefined || !word ) {
					document.createElement ( 'p' );
					document.setAttribute ( 'id', 'ordViser' );
			} else {
					word.innerHTML = '';
			}
			docment.getElementsByTagName('body')[0].removeChild( document.getElementById ( 'ordlisteVelger' ) );
			docment.getElementsByTagName('body')[0].removeChild( document.getElementById ( 'ordlisteVelgerKnapp' ) );
			clearTimeout ( timer );
	}
	function showNextWord ( ordliste, idx ) {
			if ( idx >= ordlister[ordliste].length ) {
					return displaySelect();
			}
			var word = document.getElementById ( 'ordViser' );
			timer = setTimeout ( 'showNextWord( "' + ordliste + '", ' + ( parseInt ( idx ) + 1 ) + ')', tidPerOrd );
	}
</script>

pmonstad · 22. september 2008

(Utestet) forslag til kode.. Tror det burde være et godt utgangspunkt ihvertfall =)

Det er ikke noe styling foreløpig, men alle de tre forskjellige elementene som brukes har hver sin ID:

select: select#ordlisteVelger

start-knapp: a#ordlisteVelgerKnapp

ord: p#ordViser

<script type="text/javascript">
	var tidPerOrd = 2000;

	var ordlister = new Array();
	ordlister['Enkle ord'] = new Array('ja', 'nei', 'ikke', 'pappa', 'mamma');
	ordlister['Middles vanskelige ord'] = new Array('kanskje', 'muligens', 'pølse', 'appelsin');
	ordlister['Vanskelige ord'] = new Array('gulrot', 'onomatopoetikon', 'rabarbrablader');
	// osv... nedover

	/* IKKE GJØR NOE UNDER HER */

	function displaySelect() {

			if ( document.getElementById ( 'ordlisteVelger' ) && document.getElementById ( 'ordlisteVelger' ) !== undefined ) {
					removePrevious();
			}

			var sel = document.createElement ( 'select' );
			sel.setAttribute ( 'id', 'ordlisteVelger' );
			for ( var ordliste in ordlister )
			{
					var option = document.createElement ( 'option' );
					option.innerHTML = ordliste;
					sel.appendChild ( option );
			}

			var ok = document.createElement ( 'a' );
			ok.setAttribute ( 'href', '#' );
			ok.setAttribute ( 'onclick', 'return doSelect( self );' );
			ok.setAttribute ( 'id', 'ordlisteVelgerKnapp' );
			ok.innerHTML = 'Start oppgaven';

			document.appendChild ( sel );
			document.appendChild ( ok );
	}

	var timer;
	function doSelect( ) {
			var sel = document.getElementById ( 'ordlisteVelger' );
			var idx = sel.options[sel.selectedIndex].value;

			removePrevious();
			showNextWord ( idx, 0 );
			return False; 
	}
	function removePrevious() {
			var word = document.getElementById ( 'ordViser' );
			if ( word == undefined || !word ) {
					document.createElement ( 'p' );
					document.setAttribute ( 'id', 'ordViser' );
			} else {
					word.innerHTML = '';
			}
			docment.getElementsByTagName('body')[0].removeChild( document.getElementById ( 'ordlisteVelger' ) );
			docment.getElementsByTagName('body')[0].removeChild( document.getElementById ( 'ordlisteVelgerKnapp' ) );
			clearTimeout ( timer );
	}
	function showNextWord ( ordliste, idx ) {
			if ( idx >= ordlister[ordliste].length ) {
					return displaySelect();
			}
			var word = document.getElementById ( 'ordViser' );
			timer = setTimeout ( 'showNextWord( "' + ordliste + '", ' + ( parseInt ( idx ) + 1 ) + ')', tidPerOrd );
	}
</script>

Hei! Flott dette, men min kompetanse på HTML og javascript er særdeles liten, så jeg er ikke i stand til å finne ut hvordan dette kan brukes. For meg ser det ut til at dette er funksjoner og kode for å gjøre alt bakenforliggende, men at det mangler kode for det som skal til skjerm. Noen som kan bidra med noe her? Er veldig lysten på å få løst denne utfordringen nemlig :-)

JohndoeMAKT · 24. september 2008

Her er et komplett eksempel.

Last ned og pakk ut ordting.zip, start et nettleservindu og "drag'n drop" .html-fila til nettleservinduet.

For å endre ordene åpner du fila i en teksteditor ( som notepad/notisblokk, ikke word/write ) og legg til på formatet du ser under "var words = [];".

Altså vil:

words.push( {name:'Farger',words:['Gul', 'Sort', 'Hvit']} );

lagt til etter "Bilmerker" legge til en ordliste med farger.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
	<title>Ordting</title>
	<script type="text/javascript">
		/* <![CDATA[ */
		var words = [];
		words.push( {name:'Dyr',words:['Rev', 'Katt', 'Hund']} );
		words.push( {name:'Bilmerker',words:['Ford', 'Volvo', 'Seat']} );

		var timer = {
			element : null,
			timer : null,
			select : null,
			activeWord : 0,
			activeBook : 0,
			init : function() {
				timer.element = document.getElementById( 'word' );
				timer.select = document.getElementById( 'select' );
				timer.select.removeChild( timer.select.firstChild );
				for ( var i = 0, iMax = words.length; i < iMax; i++ ) {
					var option = document.createElement( 'option' );
					option.appendChild( document.createTextNode( words[i].name ) );
					timer.select.appendChild( option );
				}
			},
			start : function() {
				var limit = document.getElementById( 'limit' );
				if ( !( limit && ( limit = parseInt( limit.value ) ) > 0 ) ) {
					console.log( 'her' );
					limit = 1;
				}
				timer.stop();
				timer.activeBook = timer.select.selectedIndex;
				timer.activeWord = 0;
				timer.timer = setInterval( timer.update, limit * 1000 );
				timer.element.innerHTML = '';
			},
			update : function() {
				if ( typeof words[timer.activeBook] !== 'undefined' && typeof words[timer.activeBook].words[timer.activeWord] === 'string' ) {
					timer.element.innerHTML = words[timer.activeBook].words[timer.activeWord];
					timer.activeWord++;
				} else {
					timer.element.innerHTML = '<Ferdig>';
					timer.stop();
				}
			},
			stop : function() {
				if ( timer.timer ) {
					clearInterval( timer.timer );
				}
			}
		};
		/* ]]> */
	</script>
	<style type="text/css">
		* {
			margin : 0;
			padding : 0;
			font-family : monospace;
		}
		body {
			height : 100%;

		}
		#word {
			position : absolute;
			top : 50%;
			width : 100%;
			text-align : center;
			font-size : 100px;
			font-weight : bold;
		}
		#footer {
			position : absolute;
			bottom : 0px;
		}
		input, select {
			margin-left : 5px;
		}
		input {
			width : 30px;
		}
	</style>
</head>
<body>
	<p id="word"><Klar></p>
	<div id="footer">
		<button onclick="timer.start();">Start</button>
		<button onclick="timer.stop();">stop</button>
		<label>Ordliste :<select id="select"><option/></select></label>
		<label>Tidsgrense :<input type="text" id="limit" value="5"/></label>
	</div>
	<script type="text/javascript">
		timer.init();
	</script>
</body>
</html>

ordting.zip

pmonstad · 24. september 2008

Hei! Takk, dette begynner virkelig å ligne det jeg er på jakt etter. Nå mangler jeg i grunnen kun tre ting for å gjøre det hele fullkomment:

Mulighet til å taste inn f.eks. 0,5 sekunder. Jeg får ikke til å sette annet enn heltall, men vil gjerne kunne bruke 0,5, 1,3 osv.

Det hadde vært veldig bra hvis jeg kunne velge å kjøre ordlistene random, dvs at ordene ikke kommer i samme rekkefølge hver gang. Vet det blir litt ekstraarbeid å programmere det, men overkommelig?

Siste ting er muligheten til å stille hvor lang tid det skal gå mellom hvert ord. Jeg trenger en innstilling for hvor lenge hvert ord skal vise, og en for hvor lang tid det er mellom hvert ord.

Håper noen løser dette, da blir jeg rett og slett veldig glad :-)

--

Pål Monstad

Endret 24. september 2008 av pmonstad

JohndoeMAKT · 24. september 2008

Her.

-Desimaler skrives på amerikansk måte med . ( punktum ) som desimalpunkt.

-Det er inputfelt for både hvor lenge hvert ord skal vises og hvor lenge pausen mellom hvert ord skal være

-Ordene vises i tilfeldig rekkefølge.

ordting.html

Endret 24. september 2008 av JohndoeMAKT

Logg inn

Trenger en programsnutt

Anbefalte innlegg

pmonstad

Lenke til kommentar

Videoannonse

pgdx

Lenke til kommentar

pgdx

Lenke til kommentar

pmonstad

Lenke til kommentar

Jonhoo

Lenke til kommentar

pmonstad

Lenke til kommentar

JohndoeMAKT

Lenke til kommentar

pmonstad

Lenke til kommentar

JohndoeMAKT

Lenke til kommentar

Opprett en konto eller logg inn for å kommentere

Opprett konto

Logg inn

Populær nå

Håndveivinga til Elon Musk 1 2 3 4 12

BMW i4 M50/edrive40 tråden! 1 2 3 4 54

Hvem er aktive 0 medlemmer