Jump to content

form data becomes URL


Recommended Posts

How can I create a form which creates a URL out of the input data (and goes to the page)?

My aim is to create a spelling helper. The user will hear an audio file of one of the 100 most misspelled words. They will type it into the field, and click the "CHECK SPELLING" button. If they spelled it correctly they will be sent to that page. If not, it will go to a "Try again!" page, or at least that message will pop up on the current page.



They hear the word "ACCOMMODATE", type it in and click "CHECK SPELLING". If correctly spelled, the ACCOMMODATE.HTML will appear. If not correct they will get a "Try again!" message or be sent to a "Try again!" page.


I can imagine an even slicker UI, in that the correct spelling simply gets a "Good job!" message, and the incorrect spelling is messaged with "Try again!". (Fewer pages to create.) I looked around for such code, but could not find it.


Thanks for your help!
Link to comment
Share on other sites

Restricted to my own knowledge and what I can do myself, I would have to make all the pages. But I have enough exposure to the possibilities that I suspected that this could be done much easier. Answer: no, I would really not want to make all those pages. But neither do I expect someone else to create my project for me. Unless... they would be so inclined.....


I figured that there would be an easier way, but I do not know how involved that would be.

Link to comment
Share on other sites

I am fairly successful at modifying existing JavaScript. But creating it from scratch is not what I win awards at. I found some randomizing code and it was very simple to modify it to my needs, but I could not have written it. I took an HTML & JS class in college. The first half went well enough. The JS portion was another story.

Link to comment
Share on other sites

I don't really need to change things. I was simply not expecting anyone to do the technical side project. If you are into it, I would be very happy to give credit and a link. Honestly, I'd rather not get my hands "greasy" since my training is in visual media and instructional design. Coding is a bit of a stretch for me. So, if this project sounds of interest to you. I am thrilled, or am I misunderstanding you?

Here is what I am aiming to do. As an instructional designer just getting into the field, I need portfolio pieces. My daughter is struggling with spelling, so I thought I’d create a speller for both her AND my portfolio.

The “changes” that I am likely to make would only be cosmetic (placement of elements, typeface size and color changes), improvement of readability & understandability, UI, and for instructional design reasons. If it works as needed, I don’t need to make changes.

The content is the 100 most often misspelled words in English. I will need to create audio files for each of them <uggh!>. The words would be chosen randomly, but not shown visibly. An audio file will play a designated time after the page opens (and a “Repeat.” button will be provided). Or the page would come up silently (NO auto-play), with a “Listen.” button provided for the learner to hear the word. And a window would be available for the learner to type in the word, with a “Check spelling.” button. If the learner spells the word correctly, it will be indicated in one way (“Correct!”) and if incorrectly, another way (“Try again!”) They are given a chance to spell the SAME word again. There should also be a “Next word.” button to randomly select a new word.

It would also be good for the user to know how many words he/she has spelled correctly and incorrectly. (Would this necessitate a log-in system?) If this were the case, one could watch their spelling score improve. Would this be done with cookies, or something on the server-side? While I am thinking about this, a “Attempts” indicator would be helpful, but not necessary. (How many times did the learner attempt to spell a given word.)

If the URL is the word, then it must be hidden somehow. Frames would do this, I think. The reason I think this way is because I would want to make it as easy as possible to locate page and audio files that relate to one another. I imagine that your one-page project idea would likely not face this dilemma. Correct?

That is the project. I think it would be a nice portfolio piece for all who work on it. It would also be practical, and also easily extendable, ....dump new words in, create new audio files and the life of the project is renewed. That is a great aspect of it from an instructional design point of view. It fits ADDIE very well.

What do you think?

Link to comment
Share on other sites

I think the basic idea sounds pretty simple, but the addition of various details might turn it into a complex task. I might be able to provide the basic code to get you started if I felt I understood the basic requirements. You could then modify the code to add features. Cookies might be a simple way to personalize the experience without adding a true log-in.

Link to comment
Share on other sites

As you commented, my original idea of a solution (form data becoming a URL) need not be the final one. It is was simply how a basic HTML-er (that's me) thinks. A one-page solution clearly is better, just out of my league to create it.

Link to comment
Share on other sites

Even the basic version would be great. A nice piece for the portfolio.


Even if I cannot accomplish all the alterations I would like, I could preface the link with a paragraph that details my intended modifications. That would show instructional designers that I recognize the demands of learning theory and how to improve the learning experience.


So, if you are into creating the basic version. I am still thrilled. As you can tell. My solution would have been very time intensive, ending with a huge volume of pages.

Link to comment
Share on other sites

Here is a basic prototype...

<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><title>speller</title><style></style><script>window.onerror = function(m, u, l){alert('Javascript Error: '+m+'nURL: '+u+'nLine Number: '+l);return true;}</script><script>var speller = {};speller.words = ['acceptable',  'Several words made the list because of the suffix pronounced -ebl but sometimes spelled -ible, sometimes -able. Just remember to accept any table offered to you and you will spell this word OK.','accidentally',   'It is no accident that the test for adverbs on -ly is whether they come from an adjective on -al ("accidental" in this case). If so, the -al has to be in the spelling. No publical, then publicly.','accommodate',   'Remember, this word is large enough to accommodate both a double "c" AND a double "m."','acquire',  'Try to acquire the knowledge that this word and the next began with the prefix ad- but the [d] converts to [c] before [q].','knowledgeable',  'The "ea" often causes trouble.'];speller.user = '';speller.icnt = 0speller.ccnt = 0;speller.offset = 2; // number of items in the speller.words array per wordspeller.wordcnt = speller.words.length/speller.offset;speller.currentword = null;speller.correct = [];speller.incorrect = [];window.onload = init;function init(){document.getElementById('btnpnw').onclick = newword;document.getElementById('btnrep').onclick = play;document.getElementById('btncs').onclick = check;document.getElementById('btn4').onclick = showCookies;speller.user = getcookie('user');while (speller.user == ''){speller.user = prompt('Please enter your name').trim();setcookie('user', speller.user);}document.getElementById('user').innerHTML = speller.user;document.getElementById('icnt').innerHTML = speller.icnt;document.getElementById('ccnt').innerHTML = speller.ccnt;document.getElementById('guess').value = '';}function check(){var guess = document.getElementById('guess').value.trim().toLowerCase();if(guess==speller.words[speller.offset * speller.currentword]){if (speller.correct[speller.currentword] != 1){ speller.ccnt++;}document.getElementById('ccnt').innerHTML = speller.ccnt;document.getElementById('out1').innerHTML = '<h2>'+ speller.words[speller.offset * speller.currentword] +'</h2><br/>'+ speller.words[speller.offset * speller.currentword + 1];speller.correct[speller.currentword] = 1;}else{speller.icnt++;document.getElementById('icnt').innerHTML = speller.icnt;}}function newword(){if (speller.ccnt == speller.wordcnt){alert('There are no more words available.');}else{// choose random wordvar max = speller.words.length/speller.offset;do{speller.currentword = Math.floor(max * Math.random());//alert(speller.currentword);}while (typeof speller.correct[speller.currentword] != 'undefined');alert('current word '+ speller.currentword +' is: '+ speller.words[speller.offset * speller.currentword]);document.getElementById('guess').value = '';document.getElementById('out1').innerHTML = '';play();}}function play(){if (speller.currentword != null){document.getElementById('fileogg').src = './audio/'+ speller.words[speller.offset * speller.currentword] + '.ogg';document.getElementById('filempeg').src = './audio/'+ speller.words[speller.offset * speller.currentword] + '.mp3';alert('play audio file ./audio/'+ speller.words[speller.offset * speller.currentword] + '.mp3');document.getElementById('player').load();document.getElementById('player').play();}else{newword();}}function getcookie(cookie_name) {var cookie_val = null;var doc_cookie_str = document.cookie;//alert('doc_cookie_str.length='+ doc_cookie_str.length);var idx = doc_cookie_str.indexOf(cookie_name + "=");if (idx != -1){  idx = doc_cookie_str.indexOf("=", idx);  var idx2 = doc_cookie_str.indexOf(";", idx);  if (idx2 == -1){    idx2 = doc_cookie_str.length;  }  cookie_val = unescape( doc_cookie_str.substring(idx+1,idx2) );  //alert('cookie found:['+ cookie_name +'='+ cookie_val +']'); }else{  cookie_val = '';  //alert('cookie not found:['+ cookie_name +']'); }return cookie_val;}function setcookie(cookie_name,cookie_val){// cookies cannot contain commas, semicolons, or whitespacevar expire_days = 365;if (cookie_name!=null && cookie_name!="" && cookie_val!=null && cookie_val!=""){  var exp_date = new Date();  exp_date.setDate(exp_date.getDate() + expire_days);  var cookie_value = escape(cookie_val) + ((expire_days==null) ? "" : "; expires="+exp_date.toUTCString());  document.cookie = cookie_name + "=" + cookie_value;  alert('set:['+ cookie_name +'='+ cookie_value +']');}}function showCookies() {var out = document.getElementById('out1');var doc_cookie_str = document.cookie;var idx1 = -2;var idx2;var done = false;out.innerHTML = '<hr/>'+ doc_cookie_str + '<hr/>';//alert(doc_cookie_str.length);if (doc_cookie_str.length==0){done=true;}while (!done){idx2 = doc_cookie_str.indexOf("=",idx1);if(idx2 != -1){  out.innerHTML += 'name:['+ doc_cookie_str.substring(idx1+2,idx2) +']';  idx1 = idx2;  idx2 = doc_cookie_str.indexOf(";",idx1);  if (idx2 != -1){    out.innerHTML += 'value:['+ unescape( doc_cookie_str.substring(idx1+1,idx2) ) +']<br/>';    idx1 = idx2;  }else{    idx2 = doc_cookie_str.length;    out.innerHTML += 'value:['+ unescape( doc_cookie_str.substring(idx1+1,idx2) ) +']<br/>';    done = true;  }}} }</script></head><body>User: <span id="user"></span><br/>Correct: <span id="ccnt"></span><br/>Incorrect: <span id="icnt"></span><br/>Spell: <input type="text" id="guess" placeholder="Enter..."/><br/><input type="button" id="btnpnw" value="Play New Word"/><input type="button" id="btnrep" value="Play Again"/><input type="button" id="btncs" value="Check Spelling"/><input type="button" id="btn4" value="show cookies"/><audio id="player">  <source id="fileogg" src="#" type="audio/ogg">  <source id="filempeg" src="#" type="audio/mpeg">Your browser does not support the HTML5 audio element.</audio><div id="out1"></div></body></html>
Link to comment
Share on other sites

Wow! How cool. It works! (Not that I was assuming that it would not, but I am just amazed anyway.)



Wow! Also with a counter of how many correct and incorrect. Slick!

I need to create the audio files. So just guessed from one of the five words that you put in. I got one in four. The spelling was correct on each, just I was shooting in the dark since I have not created the audio files yet.


I may have a question or two when I go to add the other words, name the audio files, etc.


How would you like me to give credit for the code?

Link to comment
Share on other sites

To add a new word you just add two items to the array -- the word and a comment for the word. Each must be quoted and separated by a comma.


speller.words = [












You can try to link to or download available sound files on the web, but the servers may be set up to prevent external links.


I was able to download the .wav file from...




..but now that will require a slight addition to the code above to support .wav files, and only certain browsers support each file type.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Create New...