ホームページ ウェブフロントエンド jsチュートリアル jQuery_jqueryをベースとした試験用紙自動配置システムの実装コード

jQuery_jqueryをベースとした試験用紙自動配置システムの実装コード

May 16, 2016 pm 06:12 PM
自動写植 試験紙

提供されたテスト用紙の質問に基づいて複数ページのテスト用紙を生成します (これは、「データ」のみを含むクリーンな HTML Web ページです)。ユーザーはページをめくることができ、テスト用紙の質問に表示される質問には制限時間があります。ユーザーは、できるだけ少ないスペースを占める必要があります (たとえば、複数選択の質問では、2 つの短い選択肢を 2 行から 1 行に統合して、管理者が回答しやすくすることができます)。試験用紙のスタイルを変更したり (フォント、色、行間、ページの余白、ワープロソフトなど...)、質問の間に説明文を挿入したりできます (回答者に回答の指示を通知するなど)。 )。質問のタイトル、多肢選択式の質問オプション、および説明テキストには、マルチメディア情報 (テキスト、画像、リスト、表、ビデオなど) を含めることができます。多肢選択式の選択肢の数に制限はなく、単一選択式または多肢選択式の質問にも制限はありません。ページめくりにはカスタマイズ可能なアニメーション効果が必要です

提供されるテスト用紙のサンプルは次のようなものです (入力):

コードをコピー コードは次のとおりです:


    选择题:说明文字。说明文字。说明文字。说明文字。说明文字。说明文字。说明文字。说明文字。说明文字。说明文字。说明文字。说明文字。说明文字。说明文字。


  1. 1.你认为怎样的老师是好老师?









  2. 2.一位有15年教龄的英语教师,教了多年高三,可谓学校的核心骨干。一次接受邀请到外校介绍教学经验,台下有老师发表了观点并问到几个英语教法发面的问题,一下子把她给卡住了。这是因为









  3. 3.哪张图片最好看?









  4. 填空题和选择题:一大堆的说明文字。一大堆的说明文字。一大堆的说明文字。一大堆的说明文字。一大堆的说明文字。


  5. 4.床前明月光,



  6. 5. 良い先​​生はどんな先生だと思いますか?






思考
この要求に直面して私たちは何をすべきでしょうか? JavaScriptも使用しているようです。その後、IDEとしてjQueryとAptanaを使用し(WindowsではjQueryサポートライブラリがインストールできないが、OSを変えれば大丈夫になるのが不思議)、整形にはCSSを使用することにした。

具体的な手順:

テスト用紙の質問 HTML をインポートします。
すべての多肢選択問題をフォーマットし、行を 4 つの位置に分割し、選択肢を 1 つの位置または 2 つの位置に収まるようにします。 、または 4 つのポジション (つまり、連続する 4 つのアイテム、連続する 2 つのアイテム、または連続する 1 つのアイテムの効果)
すべての質問をページングする
アイデアはまだ明確ですが、大規模なためjQuery に触れる前は...


ページ ファイルを実装します (例とは異なりますが、同じ形式です)
コードをコピー コードは次のとおりです:




No title...








PrevPage

NextPage

Loading the test...






    left


    right



    选择题:说明文字。说明文字。说明文字。说明文字。说明文字。说明文字。说明文字。说明文字。说明文字。说明文字。说明文字。说明文字。说明文字。说明文字。


  1. 1你认为怎样的老师是好老师?









  2. 2你认为怎样的老师是好老师?









  3. 3你认为怎样的老师是好老师?









  4. 4どんな先生が良い先生だと思いますか?

  5. ;/div>

    これも多肢選択式の質問であり、説明文が多く含まれています。字幕多め。字幕多め。字幕多め。字幕多め。


  6. 5 良い先生はどんな先生だと思いますか?


  7. ; 10 の指導クラスすべての結果は、他の並行クラスの結果よりも優れています


    ;
  8. 5 良い先生はどんな先生だと思いますか?






  • 6どんな先生が良い先生だと思いますか?


  • >
    input type="radio" name="prob6" value="C" />parent

    そしてクラスの結果 クラスの結果 クラスの結果


    strict クラスの結果 クラスの結果

    parent

    フォーム>



    スタイルファイル(CSS)



    コードをコピー🎜>

    コードは次のとおりです:

    /* YahooUI CSS リセット */
    body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset, input,textarea,p,blockquote,th,td {パディング: 0;マージン: 0; }
    table { border-collapse: 折りたたむ;境界線の間隔: 0; }
    フィールドセット,img { ボーダー: 0; }
    address,caption,cite,code,dfn,em,strong,th,var { font-weight:normal;フォントスタイル: 通常; }
    ol,ul {リストスタイル: なし; }
    caption,th { text-align: left; }
    h1,h2,h3,h4,h5,h6 { font-weight:normal;フォントサイズ: 100%; }
    q:前、q:後 {コンテンツ:''; }
    略語、頭字語 { border: 0;}

    label { パディング: 0;マージン: 0; }

    /* 私の CSS */
    .Choices { line-height: 150%;マージン: 5px 0; }
    .Page { 高さ: 500px;境界線: 実線の 1px グレー。 }
    #olThePaper, .Display { パディング: 0;幅: 500ピクセル; }
    /* 注意: .Display と #olThePaper の幅は同じである必要があります。 */
    .Display { float: left; }

    #divToolbar { 高さ: 35px; }
    #divPrev、#divNext { float: left;幅: 100ピクセル;高さ: 30ピクセル;境界線: 1 ピクセルの緑色の実線。背景色: #999999; }
    #divPageInfo { float: left;幅: 100ピクセル;高さ: 30ピクセル; }
    #divTimer { float: left;幅: 500ピクセル;高さ: 30ピクセル; }


    /*デバッグ用...おそらく非 IE のみ*/
    /**label { アウトライン: 点線の 1px 赤;背景色: グレー; }**/
    /**div {アウトライン: 1 ピクセルの青の破線;}**/

    下が注目です,TTestPaperProcessor.js:
    复制代码代码如下:

    /**
    *
    * @param {String} PaperOlId the id value of the ol tags indicating pages.
    * @param {String} ProblemClass the css class name for problem area.
    * @param {String} DescClass the css class name for description area.
    * @param {String} ChoicesClass the css class name for choices area.
    * @param {String} LeftPageId the id of the left page.
    * @param {String} RightPageId the id of the right page.
    * @author ExSystem
    */
    function TTestPaperProcessor(PaperOlId, ProblemClass, DescClass, ChoicesClass, LeftPageId, RightPageId) {
    this.FPaperOlId = PaperOlId;
    this.FProblemClass = ProblemClass;
    this.FDescClass = DescClass;
    this.FChoicesClass = ChoicesClass;
    this.FLeftPageId = LeftPageId;
    this.FRightPageId =RightPageId;
    $('#' + this.FLeftPageId).html('');
    $('#' + this.FRightPageId).html('');
    this._FormatProblemOptions();
    this._DivideIntoPages();
    this.setCurrPage(1);
    }

    TTestPaperProcessor.prototype = {
    FPaperOlId: '', //the id property of the ol tag contains the whole test paper.
    FProblemClass: '', //the css class name for problem area.
    FDescClass: '', //the css class name for description area.
    FChoicesClass: '', //the css class name for choices area.
    FLeftPageId: '', //the left page.
    FRightPageId: '', //the right page.
    CPageClass: 'Page',
    FIsDisplayTableSupported: null, //whether the browser is the EVIL M$IE6,7 that does not support display: table(-cell).
    FCurrPage: 0, //start from 1, 0 for no page has been displayed yet.
    FPageCount: 0, //page count.
    // /**
    // * Get external css stylesheet info.
    // * @param {String} Selector The selector in the css style sheet.
    // * @param {String} Property The property name.
    // * @return {String} The value of the property, or null for undefined property.
    // */
    // _GetCssInfo: function(Selector, Property) {
    // var mCss = document.styleSheets[0].cssRules || document.styleSheets[0].rules;
    // for (var mIndex = 0; mIndex < mCss.length; ++mIndex) {
    // if (mCss[mIndex].selectorText.toLowerCase() == Selector) {
    // return mCss[mIndex].style[Property];
    // }
    // }
    // return null;
    // },

    /**
    * @return {Boolean}
    */
    _IsDisplayTableSupported: function() {
    if (this.FIsDisplayTableSupported != null) {
    return this.FIsDisplayTableSupported;
    }

    this.FIsDisplayTableSupported = !(jQuery.browser.msie && jQuery.browser.version < 8.0);
    return this.FIsDisplayTableSupported;
    },

    /**
    * Formats radios and checkboxes for the Choices quiz.
    */
    _FormatProblemOptions: function() {
    var mThis = this;
    var mSelector = '.' + this.FProblemClass + ' .' + this.FChoicesClass;
    $(mSelector).each(function() {
    //Rearrange the options for each problem ordered by offsetWidth of the label tag.
    var mLabels = new Array();
    mLabels = jQuery.makeArray($('label', this));
    mLabels.sort(function(First, Second) {
    return $(Second).outerWidth(true) > $(First).outerWidth(true);
    });
    $(mLabels).appendTo(this);

    //Layout the options into the appropreate form.
    var mSlots = -1; //Force to create a new row, inside the while() loop.
    var mSlotWidth = $(mSelector).width() / 4.0;
    var mCellSize = 0;
    if (mThis._IsDisplayTableSupported()) {
    while (mLabels.length > 0) {
    //alert($(mLabels[0]).outerWidth(true) + '::' + $(mLabels[0]).outerHeight(true) + '::' + $(mLabels[0]).html());
    if (mSlots <= 0) { //If no empty slot, create a new row.
    mCurrRow = $('
    ');
    mCurrRow.appendTo(this);
    mSlots = 4;
    mCellSize = 0;

    var mRealCellWidth = $(mLabels[0]).outerWidth(true);
    if (mRealCellWidth < mSlotWidth) {
    mCellSize = 1;
    }
    if (mRealCellWidth >= mSlotWidth && mRealCellWidth < mSlotWidth * 2) {
    mCellSize = 2;
    }
    if (mRealCellWidth >= mSlotWidth * 2) {
    mCellSize = 4;
    }
    }
    mSlots -= mCellSize;
    if (mSlots >= 0) { //If empty slots exists, put the cell into the row.
    mLabel = mLabels.shift();
    $(mLabel).addClass('___cell');
    $(mLabel).css('display', 'table-cell');
    $(mLabel).appendTo(mCurrRow);
    }
    }
    $('.___table').each(function() { //Align all the tables and cells.
    $(this).css('width', '100%');
    var mCellWidth = 100 / $('.___cell', this).length;
    $('.___cell', this).css('width', mCellWidth + '%');
    });
    }
    else { // for the evil M$IE6, use table, tr, td tags.
    while (mLabels.length > 0) {
    if (mSlots <= 0) { //If no empty slot, create a new row.
    mCurrRow = $('
    ');
    mRow = $('');
    mRow.appendTo(mCurrRow);
    mCurrRow.appendTo(this);
    mSlots = 4;
    mCellSize = 0;

    var mRealCellWidth = $(mLabels[0]).attr('offsetWidth');
    //The EVIL IE only:
    //be sure to use this css reset: table { border-collapse: collapse; border-spacing: 0; }
    //otherwise, 2 lines will be occupied by some long problem options instead of 1.
    //or use this code instead: var mRealCellWidth = $(mLabels[0]).attr('offsetWidth') * 1.3;
    if (mRealCellWidth <= mSlotWidth) {
    mCellSize = 1;
    }
    if (mRealCellWidth > mSlotWidth && mRealCellWidth <= mSlotWidth * 2) {
    mCellSize = 2;
    }
    if (mRealCellWidth > mSlotWidth * 2) {
    mCellSize = 4;
    }
    }
    mSlots -= mCellSize;
    if (mSlots >= 0) { //If empty slots exists, put the cell into the row.
    mLabel = mLabels.shift();
    mCell = $('');
    $(mLabel).appendTo(mCell);
    mCell.appendTo($('tr', mCurrRow)[0]);
    }
    }
    $('.___table').each(function() { //Align all the tables and cells.
    $(this).css('width', '100%');
    var mCellWidth = 100 / $('tbody tr .___cell', this).length;
    $('tbody tr .___cell', this).css('width', mCellWidth + '%');
    });
    }
    });
    },

    /**
    * Create a new page, and add it to the paper.
    * @return {jQuery} the new page.
    */
    _CreateNewPage: function() {
    ++this.FPageCount;

    mPage = $('
    ');
    mPage.appendTo($('#' this.FPaperOlId));

    return mPage;
    },

    /**
    *
    * @param {Number} PageNumber
    * @return {jQuery}
    */
    _GetPage: function(PageNumber) {
    if (PageNumber < 1 || PageNumber > this.FPageCount) {
    throw new Error('invalid page number: ' PageNumber '.');
    }
    return $('#___page_' PageNumber);
    },

    /**
    *
    */
    _DivideIntoPages: function() {
    var mProblems = $('.' this.FProblemClass ', .' this.FDescClass);
    var mProblemsCount = mProblems.length;
    var mCurrPage = this._CreateNewPage();
    //var mPageHeight = mCurrPage.attr('offsetHeight'); chrome: sometimes 0. safari: always 0, IF PUTTED IN $(window).ready().
    var mPageHeight = mCurrPage.outerHeight(true); //the same as the code above. FIX: PUT IT INTO $(window).load().
    var mUsedPageHeight = 0;
    for (var mCurrProblem = 0; mCurrProblem < mProblemsCount; mCurrProblem) {
    if (mUsedPageHeight $(mProblems[mCurrProblem]).outerHeight(true) > mPageHeight) {
    mCurrPage.hide();
    mCurrPage = this._CreateNewPage();
    mPageHeight = mCurrPage.outerHeight(true);
    mUsedPageHeight = 0;
    }
    $(mProblems[mCurrProblem]).appendTo(mCurrPage);
    mUsedPageHeight = $(mProblems[mCurrProblem]).outerHeight(true);
    }
    mCurrPage.hide();
    },
    /**
    * Get the current page of the left side, started from 1.
    * @return {Number} The current page.
    */
    getCurrPage: function() {
    if (this.FPageCount == 0) {
    throw new Error('No page has been created yet.');
    }
    return this.FCurrPage;
    },
    /**
    * Trun to a specific page in the left side.
    * @param {Number} Value The page number.
    */
    setCurrPage: function(Value) {
    if (Value < 1 || Value > this.FPageCount) {
    throw new Error('No such page: ' Value '.');
    }
    this.FCurrPage = parseInt(Value / 2) * 2 1; // to get an odd number.
    $('#' this.FLeftPageId ' .' this.CPageClass).hide();
    $('#' this.FRightPageId ' .' this.CPageClass).hide();
    if (this.FCurrPage >= 0) {
    $('#___page_' this.FCurrPage).appendTo($('#' this.FLeftPageId));
    $('#___page_' this.FCurrPage).show('fast');
    if (this.FCurrPage < this.FPageCount) {
    this.FCurrPage;
    $('#___page_' this.FCurrPage).appendTo($('#' this.FRightPageId));
    $('#___page_' this.FCurrPage).show('fast');
    --this.FCurrPage;
    }
    }
    },
    /**
    * @retrun {Number}
    */
    getPageCount: function() {
    return this.FPageCount;
    },
    /**
    *
    */
    Prev: function() {
    this.setCurrPage(this.FCurrPage - 2);
    },
    /**
    *
    */
    Next: function() {
    this.setCurrPage(this.FCurrPage 2);
    }
    };

    //client code goes here...
    $(window).load(function() {
    var obj = new TTestPaperProcessor('olThePaper', 'Problem', 'Desc', 'Choices', 'divLeft', 'divRight');
    $('#divPrev').click(function() {
    try {
    obj.Prev();
    $('#divPageInfo').text(obj.getCurrPage() ' of ' obj.getPageCount());
    }
    catch (e) {
    alert('No such page!');
    }
    });
    $('#divNext').click(function() {
    try {
    obj.Next();
    $('#divPageInfo').text(obj.getCurrPage() ' of ' obj.getPageCount());
    }
    catch (e) {
    alert('No such page!');
    }
    });
    //USAGE: http://keith-wood.name/countdown.html
    function TimeUp() {
    $('#formPaper').submit();
    }
    $('#divTimer').countdown({
    until: ' 90m',
    compact: true,
    format: 'HMS',
    description: '',
    onExpiry: TimeUp
    });
    $('#divPageInfo').text(obj.getCurrPage() ' of ' obj.getPageCount());
    });

    嘿嘿,其实这是一个俺们学校一位博导老师的项目的一部分~~托给我做了。
    测试代码打包http://xiazai.jb51.net/201101/yuanma/TestPaperProcessor.rar
    このウェブサイトの声明
    この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

    ホットAIツール

    Undresser.AI Undress

    Undresser.AI Undress

    リアルなヌード写真を作成する AI 搭載アプリ

    AI Clothes Remover

    AI Clothes Remover

    写真から衣服を削除するオンライン AI ツール。

    Undress AI Tool

    Undress AI Tool

    脱衣画像を無料で

    Clothoff.io

    Clothoff.io

    AI衣類リムーバー

    AI Hentai Generator

    AI Hentai Generator

    AIヘンタイを無料で生成します。

    ホットツール

    メモ帳++7.3.1

    メモ帳++7.3.1

    使いやすく無料のコードエディター

    SublimeText3 中国語版

    SublimeText3 中国語版

    中国語版、とても使いやすい

    ゼンドスタジオ 13.0.1

    ゼンドスタジオ 13.0.1

    強力な PHP 統合開発環境

    ドリームウィーバー CS6

    ドリームウィーバー CS6

    ビジュアル Web 開発ツール

    SublimeText3 Mac版

    SublimeText3 Mac版

    神レベルのコード編集ソフト(SublimeText3)

    JavaScriptの文字列文字を交換します JavaScriptの文字列文字を交換します Mar 11, 2025 am 12:07 AM

    JavaScriptの文字列文字を交換します

    jQuery日付が有効かどうかを確認します jQuery日付が有効かどうかを確認します Mar 01, 2025 am 08:51 AM

    jQuery日付が有効かどうかを確認します

    jQueryは要素のパディング/マージンを取得します jQueryは要素のパディング/マージンを取得します Mar 01, 2025 am 08:53 AM

    jQueryは要素のパディング/マージンを取得します

    10 jQuery Accordionsタブ 10 jQuery Accordionsタブ Mar 01, 2025 am 01:34 AM

    10 jQuery Accordionsタブ

    10 jqueryプラグインをチェックする価値があります 10 jqueryプラグインをチェックする価値があります Mar 01, 2025 am 01:29 AM

    10 jqueryプラグインをチェックする価値があります

    ノードとHTTPコンソールを使用したHTTPデバッグ ノードとHTTPコンソールを使用したHTTPデバッグ Mar 01, 2025 am 01:37 AM

    ノードとHTTPコンソールを使用したHTTPデバッグ

    カスタムGoogle検索APIセットアップチュートリアル カスタムGoogle検索APIセットアップチュートリアル Mar 04, 2025 am 01:06 AM

    カスタムGoogle検索APIセットアップチュートリアル

    jQueryはscrollbarをdivに追加します jQueryはscrollbarをdivに追加します Mar 01, 2025 am 01:30 AM

    jQueryはscrollbarをdivに追加します

    See all articles