Compile a sequence of Radio Buttons with Greasemonkey?_问答_开发者

I have to compile a form, pictured below, several times with the following sequence:

First question A
Second question D
Third question 开发者_如何学运维B
Forth question D
Fifth question D

using Greasemonkey, but so far I haven't still found how on the web :(

Could you help me?

NOTE: It now appears that the OP meant "complete" when she used "Compile". This gives the question very different flavor! I've asked the OP to open a new question -- about completing a form on a 3rd-party website, using Greasemonkey. :)

Compile a sequence of Radio Buttons with Greasemonkey?

Where are your questions coming from?

For this question, we'll hard-code them into the Greasemonkey script. In practice, you'd probably want to fetch them with GM xmlhttpRequest from your server.

Given this data:

var QandA   = [ { question: "Question 1",
                  answers:  ["Answer 1", "Answer 2"],
                  correct:  [2]
                },
                { question: "Isn't life without geometry pointless?",
                  answers:  ["Yes", "Maybe", "That's Squaresville, Daddy-o."],
                  correct:  [2,3]
                }
            ];

Then this code will insert a quiz into the page. :
See it in action at jsFiddle.

//--- Build the Q&A HTML, with jQuery.
var htmlSrc     = '';

//--- Process one question at a time.
$.each (QandA, function (questIdx, questionObj) {
    var questNum    = questIdx + 1;
    htmlSrc    += '<h2><span class="GM_QuestNum">' + questNum + '</span>' + questionObj.question
                + '<span class="GM_Result">&nbsp;</span></h2>'
                + '<ul correctAns="' + questionObj.correct + '">';

    //--- Process one answer at a time.
    $.each (questionObj.answers, function (ansIdx, ansText) {
        var ansNum  = ansIdx + 1;
        htmlSrc    += '<li><label>'
                    + '<input type="radio" value="' + ansNum + '" name="GM_Quest_' + questIdx + '">'
                    + ansText
                    + '</label></li>'
                    ;
    } );
    htmlSrc    += '</ul>';
} );

//--- Generate the container and populate it with our question HTML.
$('body').append (      '<div id="GM_OurCustomQuiz">'
                    +   '<h1>Enjoy our fun Quiz!</h1>'
                    +   htmlSrc
                    +   '<button id="GM_CustQuizScoreBtn">Check Answers</button>'
                    +   '</div>'
                 );

//--- Make the score button live.
$('#GM_CustQuizScoreBtn').click ( function () {
    //--- Loop through the questions and check the answers.
    $('#GM_OurCustomQuiz ul').each ( function () {
        var jThis       = $(this);  /*-- "this" is a special variable inside each()
                                        Here it refers to the <ul> node for this
                                        loop iteration.
                                    */
        var ansVal      = jThis.find ("input:radio:checked").val ();
        var correctAns  = jThis.attr ("correctAns");
        var resultBox   = jThis.prev ('h2').children ('.GM_Result');
        if ($.inArray (ansVal, correctAns) >= 0 )
            //-- Pass! (That code is the HTML checkmark.)
            resultBox.html ('&#10003;').removeClass ('GM_WrongAns');
        else
            resultBox.html ('X').addClass ('GM_WrongAns');
    } );
} );

Putting it all together in a Greasemonkey script, and adding styling:

// ==UserScript==
// @name            _Quiz Display
// @include         http://www.google.com/*
// @include         http://stackoverflow.com/questions/*
// @require         http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js
// ==/UserScript==

//--- This is our quiz data.
var QandA   = [ { question: "Question 1",
                  answers:  ["Answer 1", "Answer 2"],
                  correct:  [2]
                },
                { question: "Isn't life without geometry pointless?",
                  answers:  ["Yes", "Maybe", "That's Squaresville, Daddy-o."],
                  correct:  [2,3]
                }
            ];


//--- Build the Q&A HTML, with jQuery.
var htmlSrc     = '';

//--- Process one question at a time.
$.each (QandA, function (questIdx, questionObj) {

    var questNum    = questIdx + 1;
    htmlSrc    += '<h2><span class="GM_QuestNum">' + questNum + '</span>' + questionObj.question
                + '<span class="GM_Result">&nbsp;</span></h2>'
                + '<ul correctAns="' + questionObj.correct + '">';

    //--- Process one answer at a time.
    $.each (questionObj.answers, function (ansIdx, ansText) {

        var ansNum  = ansIdx + 1;
        htmlSrc    += '<li><label>'
                    + '<input type="radio" value="' + ansNum + '" name="GM_Quest_' + questIdx + '">'
                    + ansText
                    + '</label></li>'
                    ;
    } );
    htmlSrc    += '</ul>';
} );


//--- Generate the container and populate it with our question HTML.
$('body').append (      '<div id="GM_OurCustomQuiz">'
                    +   '<h1>Enjoy our fun Quiz!</h1>'
                    +   htmlSrc
                    +   '<button id="GM_CustQuizScoreBtn">Check Answers</button>'
                    +   '</div>'
                 );


//--- Make the score button live.
$('#GM_CustQuizScoreBtn').click ( function () {

    //--- Loop through the questions and check the answers.
    $('#GM_OurCustomQuiz ul').each ( function () {
        var jThis       = $(this);  /*-- "this" is a special variable inside each()
                                        Here it refers to the <ul> node for this
                                        loop iteration.
                                    */
        var ansVal      = jThis.find ("input:radio:checked").val ();
        var correctAns  = jThis.attr ("correctAns");
        var resultBox   = jThis.prev ('h2').children ('.GM_Result');

        if ($.inArray (ansVal, correctAns) >= 0 )
            //-- Pass! (That code is the HTML checkmark.)
            resultBox.html ('&#10003;').removeClass ('GM_WrongAns');
        else
            resultBox.html ('X').addClass ('GM_WrongAns');
    } );
} );



//--- Use CSS styles to make everything look pretty.
GM_addStyle ( (<><![CDATA[
    #GM_OurCustomQuiz {
        color:                  black;
        background:             gold;
        text-align:             left;
        font-size:              16px;
        font-weight:            normal;
        font-family:            "Trebuchet MS", Helvetica, Tahoma, Arial, sans-serif;
        padding:                10px 5%;
        line-height:            1.5;
        max-width:              60%;
        max-height:             750px;
        opacity:                0.95;
        position:               absolute;
        padding:                0ex 3ex 1ex 3ex;
        top:                    0.5ex;
        left:                   0.5ex;
        overflow-x:             hidden;
        overflow-y:             auto;
        border:                 3px outset black;
    }
    #GM_OurCustomQuiz h1, h2 {
        line-height:            1.2;
        margin-bottom:          0.9em;
        font-weight:            bold;
    }
    #GM_OurCustomQuiz h1 {
        font-size:              2em;
        text-shadow:            0px 2px 3px #555;
    }
    #GM_OurCustomQuiz h2 {
        font-size:              1.2em;
    }
    #GM_OurCustomQuiz input[type=radio] {
        margin-right:           0.7ex;
    }
    #GM_OurCustomQuiz label {
        cursor:                 pointer;
    }
    #GM_OurCustomQuiz button {
        margin:                 1em;
        padding:                1ex;
        font-size:              120%;
        cursor:                 pointer;
        background:             buttonface;
        border:                 4px outset buttonface;
        border-radius:          8px 8px 8px 8px;
        box-shadow:             2px 2px 4px gray;
    }
    #GM_OurCustomQuiz button:hover {
        color:                  red;
        text-shadow:            0 0 3px #F66;
    }
    #GM_OurCustomQuiz ol, ul {
        list-style-type:        none;
        list-style-image:       none;
        list-style-position:    outside;
        padding-left:           3ex;
        margin-top:             -1ex;
    }
    .GM_QuestNum {
        margin-right:           1ex;
    }
    .GM_QuestNum:after {
        content:                ')';
    }
    .GM_Result {
        color:                  lime;
        display:                inline-block;
        font-family:            comic Sans MS;
        font-size:              4ex;
        font-weight:            bold;
        margin:                 0 0 0 6px;
        text-shadow:            2px 2px 5px;
        width:                  32px;
        height:                 44px;
        padding:                0;
    }
    .GM_WrongAns {
        color:                  red;
        font-weight:            normal;
    }
]]></>).toString () );