I have developed online tools that I would like to share with online teachers, teachers who use computers in the classroom and/or whose students use computers in the classroom. (These tools are all equally useful for teachers or students who do not teach online, but simply use computers for presentations.)
NOTE: This first small section (before the first double dashed line) is the ONLY section that has some resources that are not totally cross-platform (IE and Netscape-compatible, PC & Mac). ALL the material below is regarding files (web pages) and directories at http://mynichecomputing.org/digitallearning/ Go to the page http://mynichecomputing.org/digitallearning/Tdynamicwebs.html if you want to see several teaching tools for PC and Internet Explorer 5 (5.5)+ only
-------------------
FINAL NOTE ABOUT THE TOOLS ABOVE:
Though much of the above was for PC and Internet Explorer, there is one more partial exception:
The Teacher Dynamic List Builder appears to be partially cross-platform and the Dynamic Table Builder also works on newer Firefox browsers, on both PC and Mac.
-------------------- --------------------
New, Cross-Platform Dynamic Table Builder
See sample HERE. Get the whole kit in a zip file HERE . Those with just a bit of knowledge of JavaScript will see how to use it to build and then manipulate their own tables. This builds tables from sets of row data provided like this: [ "Trident", "Internet Explorer 4.0", "Win 95+", "4", "X" ], (no comma after last row of data). (The rest works automatically, except the number of input areas must be adjusted according to the number of fields your table records have -- in 2 locations -- and the associated code must be changed correspondingly (but this is all very clear and easy to about any user).)
A No-CGI Search Engine With the help of an example in the JavaScript Application Cookbook by Jerry Bradenbaugh (O'Reilly & Assoc., 1999), I have developed a very usable and easy to use Search Engine. And, the good news is that it can not only be used to search all of the web pages on your site for content, but all the web pages of any group of sites you want to index. Yes, you must first index all pages by hand BUT this is not hard and it is well worth it for what you get. To see the program work, just go to the following web page and try a search for "images" (no quotes). Follow all the directions on the page: http://mynichecomputing.org/digitallearning/Search/searchEngine.html
All you have to do to use this for yourself and your sites, OR for your site PLUS your friends sites, is to change the records.js file in obvious ways. To have this program for yourself, you can download the following zip file, unzip it, and locate records.js Change it, as you will need to. Upload all to the same folder on your web site and you got it!!: http://mynichecomputing.org/digitallearning/Search.zip
To change the program so individual selected results open in a separate browser window, click THIS LINK to find out how to make the simple changes to the nav.html file so a variant of this program will do this.
Expandable Hierarchical Link Menu
Example, thanks to Danny Goodman and his great book "JavaScript and DHTML Cookbook" (O'Reilly 2007) and to the generous code use policy of O'Reilly.
I have built a BUILDER to build this sort of menu. HERE IS A LINK TO THE BUILDER. At the bottom of the Builder page is a link to everything you need. All you need to do is alter the expandableMenu.js file with TextPad or SimpleText (or Very Simple Text) (as explained at the bottom of the Builder page) and upload that new altered js file with everything else in the unzipped zip file TO your own web site or a folder on your web site AND YOU HAVE YOUR VERY OWN Expandable Hierarchical Link Menu, with all the text content and all the links your own.
WAIT! Admittedly there is a much easier way, thanks to Nathan Smith and his contribution to the jQuery Cookbook published by O'Reilly (2010), there is a much easier system. You just need THIS ZIP FILE and then look at the html file and follow the pattern to make your own Hierarchical Menu, an easy way.
------------------ ------------------
No-Tools-Needed (non-Flash) code that provides set of Menus with Links appearing in Drop-Downs that you can customize and add to any web page so your page has any number of menus that appear as drop-downs, on the clicking of the menu titles.
Here is the link for the zip: linkDDTempl3_easiest.zip
I tried to make it clear where the contents of the drop-down menus are, so both the links in the drop-downs which appear onClick and the menu names themselves can be changed. (Also, by adding font tags, such as <font size="-1"></font> tags, to the appropriate divs, the size of the font for the menus or the menu contents can be changed.) This application is simply JavaScript, so it works on all JavaScript enabled browsers of both platforms and involves no special software to produce or modify. It is very easy to use. A roughed out working example of this application can be seen via THIS LINK. All the menu names and all the links are the same but, of course, you would modify this so this was not the case.
Recently, I tried to come up with the very simplest "bare bones" example of the MENUS -- which you could see and which you could most easily take and use on your own web page. This is a very undecorated version, but important simple customization techniques (all you are likely to need) are demonstrated. CLICK HERE to see the "bare bones" example, complete with all the directions you should need, right there on the same page.
A NON-Frame (div - based) area Contents Changer The web pages that unzip from this zip file, picSwitch4.zip , give you another easy-to-customize JavaScript application you can use for your own web pages. This application changes the visibility of areas of a web page that are all "stacked" on top of one another. You can make it so just one such area is visible at a time or you can make it so several areas (divs) appear and "layer" or stack on top of one another. Just locate the div tags that are the 10 stacked content regions and put whatever content you like in there (any of the same content a web page can hold). Often this is used to add to, or stack, pictures (or progressive portions of pictures) on top of one another. Using partially transparent pictures, so lower divs show through upper ones, is another possibility. Or, you can use the divs for text and simply display one at a time. Versions of this application can be viewed via: this link, or this link, or this link (three different versions; the first does everything; the other two are the "Checked" and "Non-Checked" versions -- with the checkbox hidden).
I am going to leave this section to those who know JavaScript. This Sample Page shows how to have a site menu (made very easily) which can have a link on each page AND TAKES UP NO SPACE!
The Sample Page also has a Newsticker, which you could put on any of your pages using whatever "news" or sayings or quotations you want. I use the ticker in the sample for quotations or sayings.
And, the Sample Page has 6 changing images, which have some educational as well as aesthetic uses. The images (each separately) when clicked stop changing. Such switching images could be used as modern visual items on some modern "multiple choice" type self-test (over which the teacher supervises) - that being one example of a utilitarian rather than an aesthetic use of this image switcher.
Anyhow, HERE IS A LINK SO YOU CAN SEE THE SAMPLE PAGE and HERE IS A LINK FOR THE KIT. As I indicated, I am basically providing this to people who know some JavaScript and thus can make all the needed changes for themselves, so they can you it for their own purposes. (I am NOT, as I usually do, providing Directions so about everyone can use it. STILL: It is actually very conceivable that persons good at seeing patterns, with no or little knowledge of JavaScript, could view the .js file in the "kit" and figure out what to change to make some or all javascript elements in that js file work for them. Just edit the js file in plain text (SimpleText or NotePad) and save with the js extension - and the other textbox in the Save As dialog set to "All Files".)
Here is a link to a page with ONLY the slideout menu. AND, HERE is a kit (zip) with JUST THAT IN IT.
--------------------------------- ---------------------------------
P.E. Teachers: A JavaScript stopwatch, accurate (minimally) to .25 sec - works offline. Here is the ZIP with the working stopwatch.
TRY IT HERE. ------------------ ------------------
"Ajax Pages Switching Application" (click the link to see it). And, HERE IS A LINK TO AN EXPLANATION, THE DIRECTIONS, A SAMPLE AND A ZIP WITH THE COMPLETE KIT !!
*** FLASH APPLICATIONS *** (cross-platform, cross-browser; like with most of the JavaScript applications, no knowledge and very little learning is needed to use them)
It occurs to me that you might want to provide your web page users with a mp3 audio player, which is NOT part of the Display Utility above. An example of this can be seen by clicking THIS LINK. To hear it play an mp3, type in "whatever.mp3" (without the quotes) - that is one available on my site (in the same folder as the player). Here is a link to a zip file that gets you the web page and the Flash movie that is the mp3 player.
(Following the directions AT THE END OF THE SECTION ABOVE tells you how you can embed this mp3 player within an area on one of your own web pages.)
THIS ZIP (zip via this link) WILL GET YOU EVERYTHING. Included: The flv player itself ( N2videoPlayer.swf ); a html page that runs it ( N2videoPlayer.html ); a page that opens a special resizing html page so that the FLV Player runs in a small undecorated, "floating" browser window (opener.htm opens specN2videoPlayer.html in its own undecorated window and the specN2videoPlayer.html resizes itself); and wswf2.htm illustrates embedding the FLV Player, left aligned, so it sits on a web page with text wrapping around it (on the right), just like a left-aligned jpeg. (Do not be 'put off' by the gobbly-gook I typed instead of words surrounding the Player in this sample web page - replace that with your own words!) Also, I have included the raw N2videoPlayer.fla file so you can open it in Flash MX 2004 or higher and alter it to your desires (but be careful, it is easy to break). A major feature of this FLV Player is that you can run movie after movie in it, in the same space on a web page (no need to open a Player for each movie !) Using it is self-explanatory: Type the name of the flv file, that is the same folder as the Player swf file, into the top Input textbox (e.g.: something.flv ) and Click the Play Button. There is also a PAUSE/UNPAUSE Button. Click here for a copy of these directions. At the present time I have only one flv movie in my web site folder. It is Movieh.flv. When any of the web pages running the Player are open in your browser (pages from my web site), go ahead and type Movieh.flv in the Input textbox and Click the Play Button. Test the PAUSE/UNPAUSE Button. (For very slow connections, press pause and wait a while before continuing to Play the movie, because this allows more to download - that's good to know.)
If you would like a flv Player that is twice as big in each dimension, width and height: CLICK HERE for the videoPlayer2.zip .
Final Notes: (1) If the PAUSE/UNPAUSE BUTTON IN THE SEPARATE-WINDOW version gets cut off, change the code onload="this.window.resizeTo(350,390);" in the body tag of specN2videoPlayer.html so the second parameter is 420 instead of 390. (Make this change by opening specN2videoPlayer.html in Notepad or SimpleText and Save after making change. Upload the changed version of this page to your site. This change was made in my specN2videoPlayer.html, the page opened BY opener.htm (which is a link above). ) (2) If your school has a web page building interface, for building your own web pages semi-automatically, some interfaces make it difficult to add code to the head of a web page. **** Solution ****: All the script from the first script tag and last tag, shown in the head of opener.htm , can be put in body of a page, right after the first body tag (include both start and end script tags). You must still be in some sort of code view of your web page to add this script code and you must also add the code for the special link to your own opener web page (put that link wherever you like). The special code in the web page that opener.htm opens (i.e., specN2videoPlayer.html) is all in the first body tag and the rest of the code is in the body, so you should be able to produce one of these web pages for yourself, even with the sort of interface, I have seen (and just described). (3) In the code which embeds the swf Player on that page, you may have to change the address of the swf file (in both of the 2 locations it appears) IF your web pages and swf files DO NOT get put in the same folder on the web server; swf files often get put in the same folder as images, and thus would have an address similar to any image on your web pages - and in that case the swf address would be like the address for a jpeg.
YOU MIGHT WANT TO SKIP AHEAD AT THIS POINT AND READ THE GREEN BOX. The following will greatly facilitate getting free videos from google and youtube for use with my player. THE SPECIFICS OF THE PROCEDURE TO ADD THE ADD-ON EXTENSION AND SCRIPTS TO YOUR FIREFOX BROWSER (this should also be possible with a Mac, since everything is cross-platform): I did all this on my windows xp machine and all works like a charm. Steps: * update FireFox to 1.5 * go to the last site in the list (the one with the note) and get the add-on and install it (close and restart FireFox) (I used the addons.mozilla.org link above to get this.) * [read the note in the green box below, before reading on .. OR ... : ] download links on Google Video and YouTube scripts from http://www.joshkinberg.com/blog/archives/2005/11/greased_google.php Look for links: Google Video Getter YouTube To Me To install these scripts ... * After downloading the 2 scripts, put them in some convenient folder * Do a File -> Open File to Browse to the first script using your FireFox browser and, once there, Do a Tools -> Install Script [Repeat this with the second script] That's it. Go to http://youtube.com or http://video.google.com and view a video. After viewing it, click on a new button to download the FLV video you just viewed. They run in my Player.
NOTE ALSO: A free tool for converting avi's to flv's is described above, in the Display Utility section.
Art/Geography Teacher APPLICATION
An application allowing you view portions of large (up to 1800 X 1800 pixel +) jpegs has been developed AND you navigate to different parts of it by dragging a "magnifying glass" over parts of a miniature version of the display. Good for close study of paintings and other art works, or for viewing maps, etc.
A sample of the program can be viewed at:
http://mynichecomputing.org/digitallearning/DeViewerN/deViewerN2b.html and the following jpg images are there for you to try it out:
* Winter.jpg * CCeiling.jpg * World.jpg
P.S. *** IMPORTANT NOTE *** : The large images take over a minute and maybe 2 minutes to download, AT 56K download speed. So be patient after clicking the "black button". Also: The viewer should not be moved while waiting for the download.
A "horizontal" version of the program also exists and can be viewed at:
http://mynichecomputing.org/digitallearning/DeViewerH/deViewerH2b.html and the following jpg image is there for you to try it out:
* 2ceil_ve2.jpg
P.S. Again, the large images take over a minute and maybe 2 minutes to download, AT 56K download speed, so be patient after clicking the "black button". Again, also: The viewer should not be moved while waiting for the download.
Get these programs, by going to:
http://mynichecomputing.org/digitallearning/DeViewerN.zip and
http://mynichecomputing.org/digitallearning/DeViewerH.zip
respectively.
All that you need to know to use these is to put the jpgs in the same directory (folder) as the html and swf files that are the program itself.
---------------------------------
Art/Geography Teacher APPLICATION (new version) (same as old N version, except allows access to remote domains)
A NEW VERSION of the application allowing you view portions of large (up to 1800 X 1800 pixel +) jpegs has been developed, allowing you to look at jpegs on any web site -- the jpegs no longer need to be on your web site. (You simply must fill in an extra textbox telling the application the domain and subdomain (folder) you want to access a jpeg from and then you can type in the full web address and look at an large jpeg on any domain where you might find them.) Saves the trouble of getting permissions to put a copy of jpegs on your own web site!
As with the other versions, you navigate to different parts of the big jpeg by dragging a "magnifying glass" over parts of a miniature version of the display. Good for close study of paintings and other art works, or for viewing maps, etc. , etc. etc.
The zip file containing this version can be obtained by clicking this link:
http://mynichecomputing.org/digitallearning/deViewerN3b.zip
* First, you can type almost the whole address of the remote jpg in the first textbox (before clicking the first black button). Specifically, with the example http://college-de-vevey.vd.ch/auteur/livres/decouverte/ (with the http:// part there) works fine. In short you can just leave off the final part of the path (the file name) from the address.
* In the second textbox you simply then type the whole path to the file (i.e. the SAME thing, except with the file name tacked on at the end). In the example: http://college-de-vevey.vd.ch/auteur/livres/decouverte/Renoir/385.jpg is what you type, before clicking the second and last black button. (Go ahead and check out the kind of large painting, real size, you can view by exploring the link without the application; of course, Internet Explorer will shrink it down until you find the square with four arrows in the lower right-hand corner and click that to see the real size -- go to that corner to make that square appear.)
Since you are not taking the maps or paintings, etc. from the remote sites, NO PERMISSIONS are needed PLUS such jpg's of maps and painting are plentiful and easy to find at http://images.google.com , complete with the great search facilities of Google!! Try it, you will like it.
Art/Geography Teacher APPLICATION (another new version) (like the version above, except allows for larger jpegs)
This NEW VERSION of the application allows you view portions of even larger (OVER 1800 X 1800 pixel +) jpegs has been developed, & allowing you to look at jpegs on any web site -- again, the jpegs no longer need to be on your web site. (You simply must fill in an extra textbox telling the application the domain and subdomain (folder) you want to access a jpeg from and then you can type in the full web address and look at an large jpeg on any domain where you might find them.) As with the version above, this saves the trouble of getting permissions to put a copy of jpegs on your own web site! And, again:
As with the other versions, you navigate to different parts of the big jpeg by dragging a "magnifying glass" over parts of a miniature version of the display. Good for close study of paintings and other art works, or for viewing maps, etc. , etc. etc. (NOTE: On this version it is kind of hard to keep track of the "magnifying glass". Please notice that the blue textbox -- which kind of looks like a flag -- disappears when you are over the "magnifying glass" thingy and the cursor turns into a hand.)
http://mynichecomputing.org/digitallearning/deViewerN3c.zip
For fun (and to try this thing), after you download the zip file and unzip it, run the html page. Read the directions at the top (so the instructions below make good sense) then: Try http://www.primap.com/en/ in the top textbox and hit the 1st black button then type: http://www.primap.com/en/Maps-Europe-Map-2400.jpg in the second textbox , and hit the second black button. Walla!! Here's another great one to try: college-de-vevey.vd.ch/auteur/livres/decouverte/Renoir/ <-- 1st textbox, 1st button (NOTE: Although the directions on the application's web page itself say to leave the http:// portion of the web address OFF -- AS SHOWN ABOVE -- this has not been found to be necessary. Leaving the http:// portion on makes the program more convenient to use, so you can leave it on. ) http://college-de-vevey.vd.ch/auteur/livres/decouverte/Renoir/385.jpg <-- 2nd textbox,button
Here is the link to try out this art/geography tool:
http://mynichecomputing.org/digitallearning/deViewerN3c.html By the way a great way to find BIG maps and images of paintings is to go to http://images.google.com and then do and "Advanced Search" for LARGE images only and for either, for example, "maps europe" or some particular painter's name... .!
NOTE: If you have an old pc/mac and/or an old browser, you should go to http://mynichecomputing.org/digitallearning/deViewerN3c.html because this particular version of the program on THIS WEB SITE has a Flash version detector and will allow you to get an updated Flash Player from MacroMedia, if the one built into your browser is too old. ALL USERS OF ANY OF THE FLASH PROGRAMS ON THIS WEB PAGE WOULD BE WELL ADVISED TO VISIT THIS WEB PAGE, JUST TO GET THE VERSION CHECK ON THEIR FLASH PLAYER AND UPGRADE IF NEEDED. If any of the Flash programs on this site do not work, it is just because you need a more modern Flash Player for your browser. This link will get it for you.
By the way: CCeiling.jpg is local to this deViewerN3c.html program and can be used to test it. Since this jpeg is local, only the second textbox and button need be used.
Finally: You may feel the need to have the full "kit" for browser detection on your own web site. It is in a zip file you can have by clicking THIS LINK. All 6 files in that zip (once extracted) of course would need to go on your web site. Users would still run the program by going to http://[your domain].deViewerN3c.html -- which is one of the 6 files in the zip.
The following application, while good in its day, IS BEST REPLACED WITH THE "Ajax Page Application" (click the link to see it). And, HERE IS A LINK TO AN EXPLANATION, THE DIRECTIONS, A SAMPLE AND A ZIP WITH THE COMPLETE KIT !!
Another APPLICATION for the English/Composition/ Language Arts Teacher: An application allowing you to instantly publish written compositions by students instantly to a web site so the can be conveniently and instantly shared and viewed by all students. The regular text version of this program can be viewed at:
http://mynichecomputing.org/digitallearning/All4/frameView.htm
(Please read all of this section, including the note at the bottom of the section, before running any of these programs.)
Compositions written by students in SimpleText or in NotePad (with Edit --> Word Wrap on) can be collected by teachers, and in seconds pasted into files with the appropriate names, uploaded to the teacher's web site, and INSTANTLY view and shared with everyone in the whole class. A second version, allowing for links and some basic html formatting of the text is also available (this involves ONLY the most rudimentary knowledge of a few html markup tags). It can be viewed at:
http://mynichecomputing.org/digitallearning/All4/frameViewH.htm
In the same folder (directory) with this htm page and the other associated html pages and the associated swf file are 35 tnew*.html files from which the content is "drawn up". The teacher alters these and uploads them to their web site (to the correct folder -- where the rest of the application is). Similarly, for the regular text version, there are 35 tnew*.txt files which the teacher quickly and easily edits or updates with student content (via nothing more than a simply copy and paste) and then uploads them to their web site (to the correct folder -- where the rest of the application is). These programs are available as zip files for download, by going to:
http://mynichecomputing.org/digitallearning/All4.zip
(This download also includes the image viewer described in the previous section, but with NO jpgs accompanying them -- you will have to drag some jpg images into the All4 folder after unzipping.)
P.S. *** IMPORTANT NOTE *** : The content takes a minute and maybe a bit longer to download, AT 56K download speed. So be patient after loading the page, the content WILL arrive.
------- This is a repeat from the main resources page (a JavaScript program) ------ For the Automatic Scoring of regular, typical multiple choice tests OR the scoring of about any questionnaire or inventory (including those with multiple items per scale and with items reused on more than one scale - the only limitation is one response per question)
PCScorer.htm (PC version): http://mynichecomputing.org/digitallearning/PCScorer.htm and MacScorer.htm (MAC version): http://mynichecomputing.org/digitallearning/MacScorer.htm
There is now a MAC/PC Cross-Platform version and you may view the text source code and get your OWN COPY by following the directions ON THIS PAGE. (If for some reason this procedure TO GET YOUR OWN COPY does not work on your MAC, just click the link for the MAC version of the Scorer (above) and View --> Source. Copy the Source into a SimpleText file and save it as cpScorer.htm . The MAC version has been reported to work on modern PCs.)
This program works well in conjunction with TextPad, a free text editing program WITH many inportant useful features.
NOTE: for ultimate efficiency:
If a student types their answers into a txt document (I suggest in particular using TextPad * with numbering "on" temporarily so the client can see what item number he/she is on) AND if one has translated their templates into a scoring system text file (per the directions via the link on the program's own web page) **THEN** indeed at most it takes a total of 20 seconds to do ALL of the following: (1) Turn line numbers off on the TextPad application the student answered the items in (2) Copy and paste your Scoring System into the JavaScript application. (3) Click a button (and wait about 1 second) (4) copy and paste the student answers in the application (5) click the same button again (and wait another 1 second). Scoring a test is as easy as that!!
CLICK THIS LINK to find places you can download TextPad -- a free text document utility that allows you to temporarily turn line numbers on so students/clients can see which test or inventory item they are presently answering. This application provides a raw txt document ready for copying and pasting student/client answers into the JavaScript application. (Though the application appears to be a temporary trial, all editions I am familiar with NEVER expire.)