How to inject a javascript function from one page into another

Question

Alright, let me preface this by saying that I have little programming experience, so I apologize if my explanation belies some serious ignorance. I've always wanted to learn certain tricks but I can never find any tutorials.

Here's the deal:

There's a website that gives you various science questions and grades the input. For each question, there is a button called "Practice Other Versions" that produces a pop-up box with a new, similar version of the problem. This new version also has a button called "Show Answer", which, obviously, shows the solutions.

I used FireBug to find the code of the Show Answer button:

<input type="submit" onclick="key('0','1')" style="border: 1px solid rgb(51, 102, 153); margin-left: 1%;" value="Show Answer" name="Key">

I looked at the "DOM" tab of FireBug to look at the internal code of the key function:

function key(pos, showAnsFlag) {
    setYpos();
    if (showAnsFlag == 1) {
        document.forms[0].showAnswer.value = 1;
        document.forms[0].hideAnswer.value = 0;
    } else {
        document.forms[0].hideAnswer.value = 1;
        document.forms[0].showAnswer.value = 0;
    }
    document.forms[0].pos.value = "";
    document.forms[0].keypos.value = pos;
    document.forms[0].randpos.value = "";
    document.forms[0].solpos.value = "";
    document.forms[0].subaction.value = "key";
}

I also looked at the Net tab of Firebug to discover the POST parameters after I click "Show Solutions":

Key Show Answer
RC_821796_0_0_821813    mc  //[These are the names of the problems]
RC_821796_0_0_821813    1
RC_821796_0_1_821813    mc
RC_821796_0_1_821813    0
UserPass    //[ERASED, because I'm not sure if it can be used maliciously]
feedback0   rmh
hideAnswer  0
hideSolution    
keypos  0
pos 
randpos 
showAnswer  1
showSolution    
solpos  
struct  CuDMAcAACEAuEuEaANErASAJANBPBjDABkCiAaAxAEEfAjCgAvAjDjDQCTDTCbBjAUBtDXDXBqEXAFAjEPAVEMESvVBVzUCcEwALAMCSBQDewWDTAPBUEBCeArESCmDWAfErAXETBFEoBDCEDxBODlCbAeEnCNEKDmDgBHAJESEKATDmAoEFAdCUALCiCLBXCcDFATAcDRDoCwERuUBTDKEkBKESCXATAbDRAwBYEFAeDREWDBCdCeElBJCPCSDtAeABBxDwDDByEPAwEVAtAoDADWCkCCBBAwDNCyEECEAlCeACDCAPCmAsDM
subaction   key
ypos    196

Alright, so all that's on the page when I "practice another version." My idea is that I want to call the "key" function (or at least a function that acts exactly like it), when I'm on the normal page, not the "Show Another Version" page. The problem is, when I check the DOM of the normal page, it doesn't even have a key function that is accessible.

Is there any way to inject javascript in the page to force a call to the key function? Optimally, it would be interesting to have a bookmarklet that looped through all of the Questions, calling the key function, and revealing the answers.

Given my paucity of knowledge, I didn't know what to try. I tried simple things like this (in the address bar)

  javascript:document.forms[0].showAnswer.value = 1;

And I know it did something, because when I type

  javascript:alert(document.forms[0].showAnswer.value);

It prompts "1", but I'm just not sure what exactly it's doing, or what else I have to do.

Edit

Let me try to clarify-- I don't own the site, so I'm trying to do some client-side javascript work to manipulate the site into doing what I want (mind you, I'm not even sure this is possible).

On one portion of the site, in a page called "practice.tpl" it allows me to press a button called "Show Answer" (the button calls the aforementioned key function and reveals the solution).

However, on another page, the button and the function do not exist. So I was wondering if I could somehow borrow the key function in the practice.tpl page, and inject it into another page.

Edit 2

This is the source code for the two pages:

Main page (the one where I'm trying to inject code) http://pastebin.com/r7KVMU1N

"Extra Problems" page (the one where the key function is) It won't let me post more than one link-- so de-obscure the following link: htt[]p://pastebin.c[]om/D8Nc6fbk

I'd appreciate any help / references.

Answer 1

You could scope document in your function so you're sending it the right one (if i'm understanding your question properly, it was a bit hard to follow)

 function key(pos, showAnsFlag, doc) {
        setYpos();
        if (showAnsFlag == 1) {
            doc.forms[0].showAnswer.value = 1;
            doc.forms[0].hideAnswer.value = 0;
        } else {
            doc.forms[0].hideAnswer.value = 1;
            doc.forms[0].showAnswer.value = 0;
        }
        doc.forms[0].pos.value = "";
        doc.forms[0].keypos.value = pos;
        doc.forms[0].randpos.value = "";
        doc.forms[0].solpos.value = "";
        doc.forms[0].subaction.value = "key";
    }

On your top level app:

key(value, value, document); // sending the local document (

on your popup pages:

window.opener.key(value,value, document); // sending the local document

is this what you're trying to do? call the main 'key' function and have it act on the current page?

Answer 2

You're half way there. From what I can see, the show answers button changes the value of a hidden form field, then submits the form on the page. It comes back with the same form and answers populated.

Your javascript:document.forms[0].showAnswer.value = 1; is half way there, but you need to submit the form so the server can give you the new form (with answers included).

javascript:document.forms[0].showAnswer.value = 1;document.forms[0].submit();

may work if that is valid javascript (I don't write in it much). You might also want to consider calling the key function instead of setting the value of 'showanswer' directly, depending on what setYpos(); is doing.

If you don't want to make a bookmarklet, you may want to look into writing a greasemonkey script that does that javascript automatically.

Edit: Of course with a link to the page/page source we could give more help.