API tools faq
paste
Guest User

Untitled

a guest
Jan 27th, 2014
109
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 12.87 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <center>
  5. <meta charset="utf-8">
  6. <title>QUIZ DLA GRACZY</title>
  7.  
  8. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
  9. <script>
  10.  
  11. var quiztitle = "QUIZ DLA GRACZY";
  12.  
  13.  
  14. var quiz = [
  15. {
  16. "Pytanie" : "Pytanie 1: Jak ma na imię ten bohater?",
  17. "image" : "http://m.ocdn.eu/_m/635bebb6d53a5e10efb3592177944e8f,0,37.jpg",
  18. "choices" : [
  19. "Edward Kenway",
  20. "Agent 007",
  21. "Agent 47",
  22. "Ralph Waldon"
  23. ],
  24. "correct" : "Agent 47",
  25. "explanation" : "Główny bohater gier komputerowych z serii Hitman. Na tyle głowy ma wytatuowany kod kreskowy oraz numer seryjny – 640509-040147 (pseudonim agenta wziął się od dwóch ostatnich cyfr kodu)",
  26. },
  27. {
  28. "Pytanie" : "Pytanie 2: Jak nazywa się ta postać?",
  29. "image" : "http://upload.wikimedia.org/wikipedia/en/7/7a/Lara_Croft.png",
  30. "choices" : [
  31. "Lara Croft",
  32. "Zelda",
  33. "Izabela Skorupko",
  34. "Angelina Jolie"
  35. ],
  36. "correct" : "Lara Croft",
  37. "explanation" : "Postać z serii gier komputerowych Tomb Raider. Jest przedstawiona jako podróżniczka, poszukiwaczka przygód i archeolog, która odwiedza między innymi krypty i ruiny starych cywilizacji.",
  38. },
  39. {
  40. "Pytanie" : "Pytanie 3: Kiedy powstał Pac-Man?",
  41. "image" : "http://upload.wikimedia.org/wikipedia/en/5/59/Pac-man.png",
  42. "choices" : [
  43. "22 maja 1980",
  44. "13 kwietnia 1981",
  45. "12 grudnia 1990",
  46. "27 stycznia 2014"
  47. ],
  48. "correct" : "22 maja 1980",
  49. "explanation" : "Komputerowa gra zręcznościowa stworzona przez firmę Namco, wydana po raz pierwszy w 1980 roku",
  50. },
  51. {
  52. "Pytanie" : "Pytanie 4: Kim był/była Zelda?",
  53. "image" : "http://chomikbiznes.cba.pl/957f4a676b489275.jpg",
  54. "choices" : [
  55. "Potworem",
  56. "Wojownikiem ratującym ksiezniczne",
  57. "Ksiezniczka",
  58. "Ksiezniczka ratujaca ksiecia"
  59. ],
  60. "correct" : "Ksiezniczka",
  61. "explanation" : "Jest to tytułowa bohaterka The Legends od Zelda, która biedny Link próbuje uratować",
  62. },
  63. {
  64. "Pytanie" : "Pytanie 5: Jak nazywa się głowny bohater w polskiej wersji tej gry?",
  65. "image" : "http://images8.gry-online.pl/galeria/galeria_duze3/535700609.jpg",
  66. "choices" : [
  67. "Kot Mruczek",
  68. "Kapitan Sparrow",
  69. "Kapitan Kot",
  70. "Kapitan Pazur"
  71. ],
  72. "correct" : "Kapitan Pazur",
  73. "explanation" : "Gra komputerowa wyprodukowana przez wytwórnię Monolith Productions w Polsce dystrybuowana przez Techland. Jej bohaterem jest kot, który odkrywa tajemnicę Amuletu Dziewięciu Istnień. Gra powstała w roku 1997, a zlokalizowana wersja trafiła do Polski w roku 2000",
  74. },
  75. {
  76. "Pytanie" : "Pytanie 6: W ile postaci mogłeś się wcielić, grając w Commandos 2?",
  77. "image" : "http://www.sztab.com/tapety/galeria/commandos-antologia-1.jpg",
  78. "choices" : [
  79. "6",
  80. "7",
  81. "5",
  82. "8"
  83. ],
  84. "correct" : "8",
  85. "explanation" : "Można było grać każdy z 8 komandosów (mogą to być: Zielony Beret, saper, szpieg, Natasha, snajper, nurek, kierowca i pies!)",
  86. },
  87.  
  88. {
  89. "Pytanie" : "Pytanie 7: Ile nacji było do wyboru w pierszej części Red Alert?",
  90. "image" : "http://static.giantbomb.com/uploads/original/0/1808/188126-1_lg.jpg",
  91. "choices" : [
  92. "1",
  93. "2",
  94. "4",
  95. "8"
  96. ],
  97. "correct" : "2",
  98. "explanation" : "Gracz ma możliwość wyboru strony konfliktu i od tego zależeć będzie, czy pod czerwonym sztandarem ruszy na Zachód, czy też w ramach sił alianckich stawi czoła radzieckiej ofensywie. Każda ze stron posiada własne charakterystyczne typy budynków i uzbrojenia.",
  99. },
  100.  
  101.  
  102. ];
  103.  
  104.  
  105.  
  106. var currentPytanie = 0, score = 0, submt=true, picked;
  107.  
  108. jQuery(document).ready(function($){
  109.  
  110.  
  111. function htmlEncode(value){
  112. return $(document.createElement('div')).text(value).html();
  113. }
  114.  
  115.  
  116. function addChoices(choices){
  117. if(typeof choices !== "undefined" && $.type(choices) == "array"){
  118. $('#choice-block').empty();
  119. for(var i=0;i<choices.length; i++){
  120. $(document.createElement('li')).addClass('choice choice-box').attr('data-index', i).text(choices[i]).appendTo('#choice-block');
  121. }
  122. }
  123. }
  124.  
  125. function nextPytanie(){
  126. submt = true;
  127. $('#explanation').empty();
  128. $('#Pytanie').text(quiz[currentPytanie]['Pytanie']);
  129. $('#pager').text('Pytanie' + Number(currentPytanie + 1) + ' z ' + quiz.length);
  130. if(quiz[currentPytanie].hasOwnProperty('image') && quiz[currentPytanie]['image'] != ""){
  131. if($('#Pytanie-image').length == 0){
  132. $(document.createElement('img')).addClass('Pytanie-image').attr('id', 'Pytanie-image').attr('src', quiz[currentPytanie]['image']).attr('alt', htmlEncode(quiz[currentPytanie]['Pytanie'])).insertAfter('#Pytanie');
  133. } else {
  134. $('#Pytanie-image').attr('src', quiz[currentPytanie]['image']).attr('alt', htmlEncode(quiz[currentPytanie]['Pytanie']));
  135. }
  136. } else {
  137. $('#Pytanie-image').remove();
  138. }
  139. addChoices(quiz[currentPytanie]['choices']);
  140. setupButtons();
  141. }
  142.  
  143. function processPytanie(choice){
  144. if(quiz[currentPytanie]['choices'][choice] == quiz[currentPytanie]['correct']){
  145. $('.choice').eq(choice).css({'background-color':'#50D943'});
  146. $('#explanation').html('<strong>Poprawna odpowiedz!</strong> ' + htmlEncode(quiz[currentPytanie]['explanation']));
  147. score++;
  148. } else {
  149. $('.choice').eq(choice).css({'background-color':'#D92623'});
  150. $('#explanation').html('<strong>Blad!</strong> ' + htmlEncode(quiz[currentPytanie]['explanation']));
  151. }
  152. currentPytanie++;
  153. $('#submitbutton').html('Nastepne pytanie &raquo;').on('click', function(){
  154. if(currentPytanie == quiz.length){
  155. endQuiz();
  156. } else {
  157. $(this).text('Sprawdz odpowiedz').css({'color':'#222'}).off('click');
  158. nextPytanie();
  159. }
  160. })
  161. }
  162.  
  163. function setupButtons(){
  164. $('.choice').on('mouseover', function(){
  165. $(this).css({'background-color':'#e1e1e1'});
  166. });
  167. $('.choice').on('mouseout', function(){
  168. $(this).css({'background-color':'#fff'});
  169. })
  170. $('.choice').on('click', function(){
  171. picked = $(this).attr('data-index');
  172. $('.choice').removeAttr('style').off('mouseout mouseover');
  173. $(this).css({'border-color':'#222','font-weight':700,'background-color':'#c1c1c1'});
  174. if(submt){
  175. submt=false;
  176. $('#submitbutton').css({'color':'#000'}).on('click', function(){
  177. $('.choice').off('click');
  178. $(this).off('click');
  179. processPytanie(picked);
  180. });
  181. }
  182. })
  183. }
  184.  
  185.  
  186. function endQuiz(){
  187. $('#explanation').empty();
  188. $('#Pytanie').empty();
  189. $('#choice-block').empty();
  190. $('#submitbutton').remove();
  191. $('#Pytanie').text("Uzyskałeś " + score + " z " + quiz.length + " poprawnych odpowiedzi.");
  192. $(document.createElement('h2')).css({'text-align':'center', 'font-size':'4em'}).text(Math.round(score/quiz.length * 100) + '%').insertAfter('#Pytanie');
  193.  
  194.  
  195. }
  196.  
  197.  
  198. function init(){
  199. //dodaj tytul
  200. if(typeof quiztitle !== "undefined" && $.type(quiztitle) === "string"){
  201. $(document.createElement('h1')).text(quiztitle).appendTo('#frame');
  202. } else {
  203. $(document.createElement('h1')).text("Quiz").appendTo('#frame');
  204. }
  205.  
  206. //dodaj strony i pytania
  207. if(typeof quiz !== "undefined" && $.type(quiz) === "array"){
  208. //dodaj strony
  209. $(document.createElement('p')).addClass('pager').attr('id','pager').text('Pytanie 1 z ' + quiz.length).appendTo('#frame');
  210. //pierwsze pytanie
  211. $(document.createElement('h2')).addClass('Pytanie').attr('id', 'Pytanie').text(quiz[0]['Pytanie']).appendTo('#frame');
  212. // dodaj obrazek
  213. if(quiz[0].hasOwnProperty('image') && quiz[0]['image'] != ""){
  214. $(document.createElement('img')).addClass('Pytanie-image').attr('id', 'Pytanie-image').attr('src', quiz[0]['image']).attr('alt', htmlEncode(quiz[0]['Pytanie'])).appendTo('#frame');
  215. }
  216. $(document.createElement('p')).addClass('explanation').attr('id','explanation').html('&nbsp;').appendTo('#frame');
  217.  
  218. //pprzechowaj pytania
  219. $(document.createElement('ul')).attr('id', 'choice-block').appendTo('#frame');
  220.  
  221. //dodaj wybor
  222. addChoices(quiz[0]['choices']);
  223.  
  224. //dodaj przycisk wyboru
  225. $(document.createElement('div')).addClass('choice-box').attr('id', 'submitbutton').text('Sprawdz odpowiedz').css({'font-weight':700,'color':'#222','padding':'30px 0'}).appendTo('#frame');
  226.  
  227. setupButtons();
  228. }
  229. }
  230.  
  231. init();
  232. });
  233. </script>
  234. <style type="text/css" media="all">
  235. /*css reset */
  236. html,body,div,span,h1,h2,h3,h4,h5,h6,p,code,small,strike,strong,sub,sup,b,u,i{border:0;font-size:100%;font:inherit;vertical-align:baseline;margin:0;padding:0;}
  237. article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block;}
  238. body{line-height:1; font:normal 0.9em/1em "Helvetica Neue", Helvetica, Arial, sans-serif;}
  239. ol,ul{list-style:none;}
  240. strong{font-weight:700;}
  241. #frame{max-width:620px;width:auto;border:1px solid #ccc;background:#fff;padding:10px;margin:3px;}
  242. h1{font:normal bold 2em/1.8em "Helvetica Neue", Helvetica, Arial, sans-serif;text-align:left;border-bottom:1px solid #999;padding:0;width:auto}
  243. h2{font:italic bold 1.3em/1.2em "Helvetica Neue", Helvetica, Arial, sans-serif;padding:0;text-align:center;margin:20px 0;}
  244. p.pager{margin:5px 0 5px; font:bold 1em/1em "Helvetica Neue", Helvetica, Arial, sans-serif;color:#999;}
  245. img.Pytanie-image{display:block;max-width:250px;margin:10px auto;border:1px solid #ccc;width:100%;height:auto;}
  246. #choice-block{display:block;list-style:none;margin:0;padding:0;}
  247. #submitbutton{background:#5a6b8c;}
  248. #submitbutton:hover{background:#7b8da6;}
  249. #explanation{margin:0 auto;padding:20px;width:75%;}
  250. .choice-box{display:block;text-align:center;margin:8px auto;padding:10px 0;border:1px solid #666;cursor:pointer;-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;}
  251. </style><br>
  252. </center>
  253. </head>
  254. <body>
  255. <div id="frame" role="content"></div>
  256. </body>
  257. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!