Generate a multiple-page quiz paper based on the paper title provided (a clean HTML page with only "data") users can perform page-turn, have the answer time limit, show the user the problem in the test paper need to occupy as little space as possible (such as the choice of two shorter options in the two lines merged into one line), Do not cross the page to display the same topic to facilitate the answer, the administrator can change the style of the test paper (font, color, line spacing, page margins, like word processing software ...). , some descriptive text can be inserted between the topics (such as informing the respondent of the answer and so on). Topic carry work, multiple-choice options, explanatory text can contain multimedia information (text, pictures, lists, tables, videos, etc.). ）。 The number of multiple-choice options is not limited to select more than one choice. The page should have a custom-made animation effect
The sample paper provided is similar to the following (Input):
Copy Code code as follows:
<ol id= "Olthepaper" >
<div class= "Desc" > Multiple-choice: Descriptive text. Descriptive text. Descriptive text. Descriptive text. Descriptive text. Descriptive text. Descriptive text. Descriptive text. Descriptive text. Descriptive text. Descriptive text. Descriptive text. Descriptive text. Descriptive text. </div>
<div class= "Problem" id= "1" >
<li>1. What kind of teacher do you think is a good teacher? </li>
<div class= "Choices" >
<label><input type= "Radio" name= "Prob1" value= "A"/> and students to get along, can fully meet the needs of students </label>
<label><input type= "Radio" name= "Prob1" value= "B" The results of the teaching class are superior to those of other parallel classes </label>
<label><input type= "Radio" name= "Prob1" value= "C"/> Strict management of students, the class with a good wind </label>
<label><input type= "Radio" name= "Prob1" value= "D"/> Parental care for students ' life and emotional state </label>
</div>
</div>
<div class= "Problem" id= "2" >
<li>2. An English teacher who has 15 years of teaching experience, has taught for many years, is the core backbone of the school. An invitation to outside to introduce teaching experience, under the table there is a teacher to give a point of view and asked a few English teaching problems, all of a sudden she was stuck. This is because </li>
<div class= "Choices" >
<label><input type= "Radio" name= "PROB2" value= "A"/> She recently worked too hard to concentrate. </label>
<label><input type= "Radio" name= "PROB2" value= "B"/> asked the teacher's point of view is very different from hers. </label>
<label><input type= "Radio" name= "PROB2" value= "C"/> Due to long time in the teaching of the first line of hard work, her attention to the problem of teaching theory is not high. </label>
<label><input type= "Radio" name= "PROB2" value= "D"/> The induction and thinking of the subject teaching less, processing not over. </label>
</div>
</div>
<div class= "Problem" id= "3" >
<li>3. Which picture is the best to see? </li>
<div class= "Choices" >
<label><input type= "Radio" name= "PROB3" value= "a"/> This one <img src= "img1.png" height= "300px" width= "400px "alt=" Img1 "/> Good-looking." </label>
<label><input type= "Radio" name= "PROB3" value= "B"/> This one <img src= "img2.png" height= "300px" width= "400px "alt=" Img2 "/> Good-looking." </label>
<label><input type= "Radio" name= "PROB3" value= "C"/> This one <img src= "img3.png" height= "300px" width= "400px "alt=" Img3 "/> Good-looking." </label>
<label><input type= "Radio" name= "PROB3" value= "D"/> This one <img src= "img4.png" height= "300px" width= "400px "alt=" Img4 "/> Good-looking." </label>
<label><input type= "Radio" name= "PROB3" value= "E"/> do not know. </label>
</div>
</div>
<div class= "Desc" > Fill in the Blanks and multiple-choice questions: a large pile of explanatory text. A large pile of descriptive text. A large pile of descriptive text. A large pile of descriptive text. A large pile of descriptive text. </div>
<div class= "Problem" id= "4" >
<li>4. Before the bed Ming Moonlight, <input type= "text" name= "PROB4"/></li>
</div>
<div class= "Problem" id= "5" >
<li>5. What kind of teacher do you think is a good teacher? </li>
<div class= "Choices" >
<label><input type= "checkbox" Name= "Prob6" value= "D"/> and </label>
<label><input type= "checkbox" Name= "Prob6" value= "A"/> </label>
<label><input type= "checkbox" Name= "Prob6" value= "B"/> Yan </label>
<label><input type= "checkbox" Name= "Prob6" value= "C"/> Parent </label>
<label><input type= "checkbox" Name= "Prob6" value= "E"/> and the grades of the class grades class grades </label>
<label><input type= "checkbox" Name= "Prob6" value= "F"/> The results of class grades </label>
<label><input type= "checkbox" Name= "Prob6" value= "G"/> The grade of the class of the grades of the grade class grades </label>
<label><input type= "checkbox" Name= "Prob6" value= "H"/> Ah </label>
</div>
</div>
</ol>
Ideas
What should we do in the face of this demand? Using JavaScript, it seems. Later decided to use Jquery,aptana as the IDE (although the jquery support library in the windows of anyway can not install, change the OS is good, strange), the format is used CSS.
Specific steps:
Import Quiz paper Topic HTML
Typesetting all multiple-choice questions, dividing one line into four positions, so that the options are as fit as possible to a position, two position, or four position (that is, the effect of one row, two items, or a row)
Paging through all topics
The idea is clear, but due to the large number of browsers, it is still more troublesome, and I am a novice, did not touch jquery before ...
Realize
Paging file (unlike examples, but in the same format)
Copy Code code as follows:
<! DOCTYPE HTML PUBLIC "-//w3c//dtd XHTML 1.1//en" "Http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd" >
<html xmlns= "http://www.w3.org/1999/xhtml" >
<head>
<title>no title...</title>
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<script language= "JavaScript" src= "Lib/jquery/jquery-1.4.2.js" type= "Text/javascript" ></script>
<script language= "JavaScript" src= "Lib/countdown/jquery.countdown.pack.js" type= "Text/javascript" ></ Script>
<script language= "JavaScript" src= "Testpaperprocessor.js" type= "Text/javascript" ></script>
<link href= "Style.css" rel= "stylesheet" type= "Text/css"/>
</head>
<body>
<div id= "Divtoolbar" >
<div id= "Divprev" >PrevPage</div>
<div id= "Divnext" >NextPage</div>
<div id= "Divpageinfo" >loading the test...</div>
<div id= "Divtimer" ></div>
</div>
<form id= "Formpaper" action= "demo.html" method= "post" accept-charset= "Utf-8" >
<ul>
<div class= "Display" id= "Divleft" >
left<!--the left page-->
</div>
<div class= "Display" id= "Divright" >
right<!--the right page-->
</div>
</ul>
<ol id= "Olthepaper" >
<div class= "Desc" > Multiple-choice: Descriptive text. Descriptive text. Descriptive text. Descriptive text. Descriptive text. Descriptive text. Descriptive text. Descriptive text. Descriptive text. Descriptive text. Descriptive text. Descriptive text. Descriptive text. Descriptive text. </div>
<div class= "Problem" id= "1" >
<li>1 What kind of teacher do you think is a good teacher? </li>
<div class= "Choices" >
<label>
<input type= "Radio" name= "Prob1" value= "D"/> and students to get along, can fully meet the needs of students
</label>
<label>
<input type= "Radio" name= "Prob1" value= "A" The results of the teaching class are superior to those of other parallel classes.
</label>
<label>
<input type= "Radio" name= "Prob1" value= "B"/> Strict management of students/the class of the class with good wind
</label>
<label>
<input type= "Radio" name= "Prob1" value= "C"/> Parental care for students ' life and emotional state
</label>
</div>
</div>
<div class= "Problem" id= "2" >
<li>2 What kind of teacher do you think is a good teacher? </li>
<div class= "Choices" >
<label>
<input type= "Radio" name= "PROB2" value= "D"/> and student ping jlsdjklsdf students need
</label>
<label>
<input type= "Radio" name= "PROB2" value= "A"/>
</label>
<label>
<input type= "Radio" name= "PROB2" value= "B"/> Strictly good
</label>
<label>
<input type= "Radio" name= "PROB2" value= "C"/> Parents care about students ' life and emotional state
</label>
</div>
</div>
<div class= "Problem" id= "3" >
<li>3 What kind of teacher do you think is a good teacher? </li>
<div class= "Choices" >
<label>
<input type= "Radio" name= "PROB3" value= "D"/> and students to get along, can fully meet the needs of students
</label>
<label>
<input type= "Radio" name= "PROB3" value= "A" The results of the teaching class are superior to those of other parallel classes.
</label>
<label>
<input type= "Radio" name= "PROB3" value= "B"/> Strict management of students/the class of the class with good wind
</label>
<label>
<input type= "Radio" name= "PROB3" value= "C"/> Parental care for students ' life and emotional state
</label>
</div>
</div>
<div class= "Problem" id= "4" >
<li>4 What kind of teacher do you think is a good teacher? </li>
<div class= "Choices" >
<label>
<input type= "Radio" name= "PROB4" value= "D"/> and students to get along equally, can fully meet the students and the equal, can fully meet the students and the equal, can fully meet the students and student equality, can fully meet the students and learn to live on equal footing , can fully meet the students and the equal, can fully meet the students and equal together, can fully meet the students and the equal, can fully meet the students and the equal, can fully meet the needs of students
</label>
<label>
<input type= "Radio" name= "PROB4" value= "A" The results of the teaching class are superior to those of other parallel classes.
</label>
<label>
<input type= "Radio" name= "PROB4" value= "B"/> Strict management of students/the class of the class with good wind
</label>
<label>
<input type= "Radio" name= "PROB4" value= "C"/> Parental care for students ' life and emotional state
</label>
</div>
</div>
<div class= "Desc" > or multiple-choice: A lot of descriptive text. A large pile of descriptive text. A large pile of descriptive text. A large pile of descriptive text. A large pile of descriptive text. </div>
<div class= "Problem" id= "ten" >
<li>5 What kind of teacher do you think is a good teacher? </li>
<div class= "Choices" >
<label>
<input type= "Radio" name= "PROB5" value= "D"/> and 10 students to get along equally, can fully meet the needs of students
</label>
<label>
<input type= "Radio" name= "PROB5" value= "A"/> 10 in the teaching class is superior to other parallel classes
</label>
<label>
<input type= "Radio" name= "PROB5" value= "B"/> Strict 10jhjhjhjhkljlkjjkljjkjjkllkjlkjljkjljlkj lattice tube text
</label>
<label>
<input type= "Radio" name= "PROB5" value= "C"/> Father is concerned about students ' life and emotional state 10
</label>
</div>
</div>
<div class= "Problem" id= "5" >
<li>5 What kind of teacher do you think is a good teacher? </li>
<div class= "Choices" >
<label>
<input type= "Radio" name= "PROB5" value= "D"/> and students to get along, can fully meet the needs of students
</label>
<label>
<input type= "Radio" name= "PROB5" value= "A" The results of the teaching class are superior to those of other parallel classes.
</label>
<label>
<input type= "Radio" name= "PROB5" value= "B"/> Strict jhjhjhjhkljlkjjkljjkjjkllkjlkjljkjljlkj tube <img src= "Aaaa9.jpg" "Height=" 300px "width=" 400px "alt=" pic "/> Text
</label>
<label>
<input type= "Radio" name= "PROB5" value= "C"/> Parental care for students ' life and emotional state
</label>
</div>
</div>
<div class= "Problem" id= "6" >
<li>6 What kind of teacher do you think is a good teacher? </li>
<div class= "Choices" >
<label>
<input type= "Radio" name= "Prob6" value= "D"/> and
</label>
<label>
<input type= "Radio" name= "Prob6" value= "A"/>
</label>
<label>
<input type= "Radio" name= "Prob6" value= "B"/> Strict
</label>
<label>
<input type= "Radio" name= "Prob6" value= "C"/> Father
</label>
<label>
<input type= "Radio" name= "Prob6" value= "E"/> and the grades of the grade class of the class's grades
</label>
<label>
<input type= "Radio" name= "Prob6" value= "F"/> The grades of the grade class of the class
</label>
<label>
<input type= "Radio" name= "Prob6" value= "G"/> The grade of the class of the grades of the grade class grades
</label>
<label>
<input type= "Radio" name= "Prob6" value= "H"/> Father
</label>
</div>
</div>
</ol>
</form>
</body>
</html>
Style files (CSS)
Copy Code code as follows:
/* Yahooui CSS Reset * * *
BODY,DIV,DL,DT,DD,UL,OL,LI,H1,H2,H3,H4,H5,H6,PRE,FORM,FIELDSET,INPUT,TEXTAREA,P,BLOCKQUOTE,TH,TD {padding:0; margin:0; }
Table {border-collapse:collapse; border-spacing:0;}
fieldset,img {border:0;}
Address,caption,cite,code,dfn,em,strong,th,var {font-weight:normal; font-style:normal;}
Ol,ul {list-style:none;}
caption,th {text-align:left;}
H1,h2,h3,h4,h5,h6 {font-weight:normal; font-size:100%;}
Q:before,q:after {content: ';}
abbr,acronym {border:0;}
label {padding:0; margin:0;}
/* My CSS */
. choices {line-height:150%; margin:5px 0;}
. Page {height:500px; border:solid 1px Gray;}
#olThePaper,. Display {padding:0; width:500px;}
/* notice:the width of. Display and #olThePaper should be the SAME. */
. Display {float:left;}
#divToolbar {height:35px;}
#divPrev, #divNext {float:left; width:100px height:30px; border:solid 1px green; Background-color: #999999;}
#divPageInfo {float:left; width:100px; height:30px;}
#divTimer {float:left; width:500px; height:30px;}
/*for debugging ... perhaps for Non-ie only*/
/**label {outline:dotted 1px red; background-color:gray;} **/
/**div {outline:dashed 1px blue;} **/
Here is the key, Ttestpaperprocessor.js:
Copy Code code as follows:
/**
*
* @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<exsystemchina@gmail.com>
*/
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 this 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 name.
* @return {String} The value of the property, or null for undefined.
// */
_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 (Second) {
return $ (Second). Outerwidth (True) > $ (a) 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 = $ (' <div class= "___table" style= "display:table;" ></div> ');
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 tables and cells.
$ (this). CSS (' width ', ' 100% ');
var mcellwidth = $/$ ('. ___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 = $ (' <table class= "___table" cellspacing= "0" cellpadding= "0" ></table> ");
Mrow = $ (' <tr></tr> ');
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 is 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 = $ (' <td class= ' ___cell ' ></td> ');
$ (Mlabel). Appendto (Mcell);
Mcell.appendto ($ (' tr ', Mcurrrow) [0]);
}
}
$ ('. ___table '). each (function () {//align all tables and cells.
$ (this). CSS (' width ', ' 100% ');
var mcellwidth = m/$ (' 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 = $ (' <div class= ' + this.) Cpageclass + ' id= ' ___page_ ' + this. Fpagecount + ' ></div> ');
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 into 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 a 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 ());
});
Hehe, actually this is one of our school Bo Guide Teacher's Project part ~ ~ Entrusted to me to do.
Test Code Packaging Http://xiazai.jb51.net/201101/yuanma/TestPaperProcessor.rar
