| 1 | <?xml version="1.0"?> |
|---|
| 2 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "xhtml11.dtd"> |
|---|
| 3 | <html xmlns="http://www.w3.org/1999/xhtml" |
|---|
| 4 | xml:lang="en"><head><meta name="author" content="Created with Hot Potatoes by Half-Baked Software, registered to Ismail Ali Gago."></meta><meta name="keywords" content="Hot Potatoes, Hot Potatoes, Half-Baked Software, Windows, University of Victoria"></meta> |
|---|
| 5 | |
|---|
| 6 | <link rel="schema.DC" href="http://purl.org/dc/elements/1.1/" /> |
|---|
| 7 | <meta name="DC:Creator" content="Ismail Ali Gago" /> |
|---|
| 8 | <meta name="DC:Creator" content="UNREGISTERED" /> |
|---|
| 9 | <meta name="DC:Title" content="Ejercicio de ordenar la letras de una palabra elaborado con JMix" /> |
|---|
| 10 | |
|---|
| 11 | |
|---|
| 12 | <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> |
|---|
| 13 | |
|---|
| 14 | <title> |
|---|
| 15 | Ejercicio de ordenar la letras de una palabra elaborado con JMix |
|---|
| 16 | </title> |
|---|
| 17 | |
|---|
| 18 | <!-- Made with executable version 6.0 Release 2 Build 0 --> |
|---|
| 19 | |
|---|
| 20 | <!-- The following insertion allows you to add your own code directly to this head tag from the configuration screen --> |
|---|
| 21 | |
|---|
| 22 | |
|---|
| 23 | |
|---|
| 24 | <style type="text/css"> |
|---|
| 25 | |
|---|
| 26 | |
|---|
| 27 | /* This is the CSS stylesheet used in the exercise. */ |
|---|
| 28 | /* Elements in square brackets are replaced by data based on configuration settings when the exercise is built. */ |
|---|
| 29 | |
|---|
| 30 | |
|---|
| 31 | body{ |
|---|
| 32 | font-family: Geneva,Arial; |
|---|
| 33 | background-color: #FFFFFF; |
|---|
| 34 | color: #330033; |
|---|
| 35 | |
|---|
| 36 | margin-right: 5%; |
|---|
| 37 | margin-left: 5%; |
|---|
| 38 | font-size: small; |
|---|
| 39 | } |
|---|
| 40 | |
|---|
| 41 | p{ |
|---|
| 42 | text-align: left; |
|---|
| 43 | margin: 0px; |
|---|
| 44 | font-size: small; |
|---|
| 45 | } |
|---|
| 46 | |
|---|
| 47 | div,span,td{ |
|---|
| 48 | font-size: small; |
|---|
| 49 | color: #330033; |
|---|
| 50 | } |
|---|
| 51 | |
|---|
| 52 | .RTLText{ |
|---|
| 53 | text-align: right; |
|---|
| 54 | font-size: 150%; |
|---|
| 55 | direction: rtl; |
|---|
| 56 | font-family: "Simplified Arabic", "Traditional Arabic", "Times New Roman", Geneva,Arial; |
|---|
| 57 | } |
|---|
| 58 | |
|---|
| 59 | .CentredRTLText{ |
|---|
| 60 | text-align: center; |
|---|
| 61 | font-size: 150%; |
|---|
| 62 | direction: rtl; |
|---|
| 63 | font-family: "Simplified Arabic", "Traditional Arabic", "Times New Roman", Geneva,Arial; |
|---|
| 64 | } |
|---|
| 65 | |
|---|
| 66 | button p.RTLText{ |
|---|
| 67 | text-align: center; |
|---|
| 68 | } |
|---|
| 69 | |
|---|
| 70 | .RTLGapBox{ |
|---|
| 71 | text-align: right; |
|---|
| 72 | font-size: 150%; |
|---|
| 73 | direction: rtl; |
|---|
| 74 | font-family: "Times New Roman", Geneva,Arial; |
|---|
| 75 | } |
|---|
| 76 | |
|---|
| 77 | .Guess{ |
|---|
| 78 | font-weight: bold; |
|---|
| 79 | } |
|---|
| 80 | |
|---|
| 81 | .CorrectAnswer{ |
|---|
| 82 | font-weight: bold; |
|---|
| 83 | } |
|---|
| 84 | |
|---|
| 85 | div.Titles{ |
|---|
| 86 | padding: 10px; |
|---|
| 87 | text-align: center; |
|---|
| 88 | color: #660066; |
|---|
| 89 | } |
|---|
| 90 | |
|---|
| 91 | button{ |
|---|
| 92 | display: inline; |
|---|
| 93 | } |
|---|
| 94 | |
|---|
| 95 | .ExerciseTitle{ |
|---|
| 96 | font-size: large; |
|---|
| 97 | color: #660066; |
|---|
| 98 | } |
|---|
| 99 | |
|---|
| 100 | .ExerciseSubtitle{ |
|---|
| 101 | color: #660066; |
|---|
| 102 | } |
|---|
| 103 | |
|---|
| 104 | div#Timer{ |
|---|
| 105 | padding: 6px; |
|---|
| 106 | margin-left: auto; |
|---|
| 107 | margin-right: auto; |
|---|
| 108 | text-align: center; |
|---|
| 109 | } |
|---|
| 110 | |
|---|
| 111 | span#TimerText{ |
|---|
| 112 | padding: 6px; |
|---|
| 113 | border-width: 1px; |
|---|
| 114 | border-style: solid; |
|---|
| 115 | font-weight: bold; |
|---|
| 116 | display: none; |
|---|
| 117 | } |
|---|
| 118 | |
|---|
| 119 | span.Instructions{ |
|---|
| 120 | |
|---|
| 121 | } |
|---|
| 122 | |
|---|
| 123 | div.ExerciseText{ |
|---|
| 124 | |
|---|
| 125 | } |
|---|
| 126 | |
|---|
| 127 | .FeedbackText{ |
|---|
| 128 | color: #660066; |
|---|
| 129 | } |
|---|
| 130 | |
|---|
| 131 | span.LeftItem{ |
|---|
| 132 | font-size: small; |
|---|
| 133 | color: #330033; |
|---|
| 134 | } |
|---|
| 135 | |
|---|
| 136 | span.RightItem{ |
|---|
| 137 | font-weight: bold; |
|---|
| 138 | font-size: small; |
|---|
| 139 | color: #330033; |
|---|
| 140 | } |
|---|
| 141 | |
|---|
| 142 | span.CorrectMark{ |
|---|
| 143 | |
|---|
| 144 | } |
|---|
| 145 | |
|---|
| 146 | div.Feedback { |
|---|
| 147 | background-color: #FFFFFF; |
|---|
| 148 | left: 33%; |
|---|
| 149 | width: 34%; |
|---|
| 150 | top: 33%; |
|---|
| 151 | z-index: 1; |
|---|
| 152 | border-style: solid; |
|---|
| 153 | border-width: 1px; |
|---|
| 154 | padding: 5px; |
|---|
| 155 | text-align: center; |
|---|
| 156 | color: #660066; |
|---|
| 157 | position: absolute; |
|---|
| 158 | display: none; |
|---|
| 159 | font-size: small; |
|---|
| 160 | } |
|---|
| 161 | |
|---|
| 162 | |
|---|
| 163 | [inclReading] |
|---|
| 164 | div.LeftContainer{ |
|---|
| 165 | border-style: none; |
|---|
| 166 | padding: 2px 0px 2px 0px; |
|---|
| 167 | float: left; |
|---|
| 168 | width: 49.8%; |
|---|
| 169 | margin-bottom: 0px; |
|---|
| 170 | } |
|---|
| 171 | |
|---|
| 172 | div.RightContainer{ |
|---|
| 173 | border-style: none; |
|---|
| 174 | padding: 2px 0px 2px 0px; |
|---|
| 175 | float: right; |
|---|
| 176 | width: 49.8%; |
|---|
| 177 | margin-bottom: 0px; |
|---|
| 178 | } |
|---|
| 179 | |
|---|
| 180 | .ReadingText{ |
|---|
| 181 | |
|---|
| 182 | } |
|---|
| 183 | [/inclReading] |
|---|
| 184 | |
|---|
| 185 | div.ExerciseDiv{ |
|---|
| 186 | color: #330033; |
|---|
| 187 | } |
|---|
| 188 | |
|---|
| 189 | /* JMatch flashcard styles */ |
|---|
| 190 | table.FlashcardTable{ |
|---|
| 191 | background-color: transparent; |
|---|
| 192 | color: #330033; |
|---|
| 193 | border-color: #330033; |
|---|
| 194 | margin-left: 5%; |
|---|
| 195 | margin-right: 5%; |
|---|
| 196 | margin-top: 2em; |
|---|
| 197 | margin-bottom: 2em; |
|---|
| 198 | width: 90%; |
|---|
| 199 | position: relative; |
|---|
| 200 | align: center; |
|---|
| 201 | padding: 0px; |
|---|
| 202 | } |
|---|
| 203 | |
|---|
| 204 | table.FlashcardTable tr{ |
|---|
| 205 | border-style: none; |
|---|
| 206 | margin: 0px; |
|---|
| 207 | padding: 0px; |
|---|
| 208 | background-color: #EECCEE; |
|---|
| 209 | } |
|---|
| 210 | |
|---|
| 211 | table.FlashcardTable td.Showing{ |
|---|
| 212 | font-size: large; |
|---|
| 213 | text-align: center; |
|---|
| 214 | width: 50%; |
|---|
| 215 | display: table-cell; |
|---|
| 216 | padding: 2em; |
|---|
| 217 | margin: 0px; |
|---|
| 218 | border-style: solid; |
|---|
| 219 | border-width: 1px; |
|---|
| 220 | color: #330033; |
|---|
| 221 | background-color: #EECCEE; |
|---|
| 222 | } |
|---|
| 223 | |
|---|
| 224 | table.FlashcardTable td.Hidden{ |
|---|
| 225 | display: none; |
|---|
| 226 | } |
|---|
| 227 | |
|---|
| 228 | /* JMix styles */ |
|---|
| 229 | div#SegmentDiv{ |
|---|
| 230 | margin-top: 2em; |
|---|
| 231 | margin-bottom: 2em; |
|---|
| 232 | text-align: center; |
|---|
| 233 | } |
|---|
| 234 | |
|---|
| 235 | a.ExSegment{ |
|---|
| 236 | font-size: medium; |
|---|
| 237 | font-weight: bold; |
|---|
| 238 | text-decoration: none; |
|---|
| 239 | color: #330033; |
|---|
| 240 | } |
|---|
| 241 | |
|---|
| 242 | span.RemainingWordList{ |
|---|
| 243 | font-style: italic; |
|---|
| 244 | } |
|---|
| 245 | |
|---|
| 246 | div.DropLine { |
|---|
| 247 | position: absolute; |
|---|
| 248 | text-align: center; |
|---|
| 249 | border-bottom-style: solid; |
|---|
| 250 | border-bottom-width: 1px; |
|---|
| 251 | border-bottom-color: #660066; |
|---|
| 252 | width: 80%; |
|---|
| 253 | } |
|---|
| 254 | |
|---|
| 255 | /* JCloze styles */ |
|---|
| 256 | |
|---|
| 257 | input{ |
|---|
| 258 | font-family: Geneva,Arial; |
|---|
| 259 | font-size: larger; |
|---|
| 260 | } |
|---|
| 261 | |
|---|
| 262 | .ClozeWordList{ |
|---|
| 263 | text-align: center; |
|---|
| 264 | font-weight: bold; |
|---|
| 265 | } |
|---|
| 266 | |
|---|
| 267 | div.ClozeBody{ |
|---|
| 268 | text-align: left; |
|---|
| 269 | margin-top: 2em; |
|---|
| 270 | margin-bottom: 2em; |
|---|
| 271 | line-height: 2.0 |
|---|
| 272 | } |
|---|
| 273 | |
|---|
| 274 | span.GapSpan{ |
|---|
| 275 | font-weight: bold; |
|---|
| 276 | } |
|---|
| 277 | |
|---|
| 278 | /* JCross styles */ |
|---|
| 279 | |
|---|
| 280 | table.CrosswordGrid{ |
|---|
| 281 | margin: auto auto 1em auto; |
|---|
| 282 | border-collapse: collapse; |
|---|
| 283 | padding: 0px; |
|---|
| 284 | } |
|---|
| 285 | |
|---|
| 286 | table.CrosswordGrid td{ |
|---|
| 287 | width: 1.5em; |
|---|
| 288 | height: 1.5em; |
|---|
| 289 | text-align: center; |
|---|
| 290 | vertical-align: middle; |
|---|
| 291 | font-size: large; |
|---|
| 292 | padding: 0px; |
|---|
| 293 | margin: 0px; |
|---|
| 294 | border-style: solid; |
|---|
| 295 | border-width: 1px; |
|---|
| 296 | border-color: #000000; |
|---|
| 297 | } |
|---|
| 298 | |
|---|
| 299 | table.CrosswordGrid td.BlankCell{ |
|---|
| 300 | background-color: #000000; |
|---|
| 301 | color: #000000; |
|---|
| 302 | } |
|---|
| 303 | |
|---|
| 304 | table.CrosswordGrid td.LetterOnlyCell{ |
|---|
| 305 | text-align: center; |
|---|
| 306 | vertical-align: middle; |
|---|
| 307 | background-color: #ffffff; |
|---|
| 308 | color: #000000; |
|---|
| 309 | font-weight: bold; |
|---|
| 310 | } |
|---|
| 311 | |
|---|
| 312 | table.CrosswordGrid td.NumLetterCell{ |
|---|
| 313 | text-align: left; |
|---|
| 314 | vertical-align: top; |
|---|
| 315 | background-color: #ffffff; |
|---|
| 316 | color: #000000; |
|---|
| 317 | padding: 1px; |
|---|
| 318 | font-weight: bold; |
|---|
| 319 | } |
|---|
| 320 | |
|---|
| 321 | .NumLetterCellText{ |
|---|
| 322 | cursor: pointer; |
|---|
| 323 | } |
|---|
| 324 | |
|---|
| 325 | .GridNum{ |
|---|
| 326 | vertical-align: super; |
|---|
| 327 | font-size: x-small; |
|---|
| 328 | font-weight: bold; |
|---|
| 329 | text-decoration: none; |
|---|
| 330 | color: #000000; |
|---|
| 331 | } |
|---|
| 332 | |
|---|
| 333 | table#Clues{ |
|---|
| 334 | margin: auto; |
|---|
| 335 | vertical-align: top; |
|---|
| 336 | } |
|---|
| 337 | |
|---|
| 338 | table#Clues td{ |
|---|
| 339 | vertical-align: top; |
|---|
| 340 | } |
|---|
| 341 | |
|---|
| 342 | table.ClueList{ |
|---|
| 343 | margin: auto; |
|---|
| 344 | } |
|---|
| 345 | |
|---|
| 346 | td.ClueNum{ |
|---|
| 347 | text-align: right; |
|---|
| 348 | font-weight: bold; |
|---|
| 349 | vertical-align: top; |
|---|
| 350 | } |
|---|
| 351 | |
|---|
| 352 | td.Clue{ |
|---|
| 353 | text-align: left; |
|---|
| 354 | } |
|---|
| 355 | |
|---|
| 356 | div#ClueEntry{ |
|---|
| 357 | text-align: left; |
|---|
| 358 | margin-bottom: 1em; |
|---|
| 359 | } |
|---|
| 360 | |
|---|
| 361 | /* Keypad styles */ |
|---|
| 362 | |
|---|
| 363 | div.Keypad{ |
|---|
| 364 | text-align: center; |
|---|
| 365 | } |
|---|
| 366 | |
|---|
| 367 | div.Keypad button{ |
|---|
| 368 | font-family: Geneva,Arial; |
|---|
| 369 | font-size: 120%; |
|---|
| 370 | background-color: #ffffff; |
|---|
| 371 | color: #000000; |
|---|
| 372 | width: 2em; |
|---|
| 373 | } |
|---|
| 374 | |
|---|
| 375 | /* JQuiz styles */ |
|---|
| 376 | |
|---|
| 377 | div.QuestionNavigation{ |
|---|
| 378 | text-align: center; |
|---|
| 379 | } |
|---|
| 380 | |
|---|
| 381 | .QNum{ |
|---|
| 382 | margin: 0em 1em 0.5em 1em; |
|---|
| 383 | font-weight: bold; |
|---|
| 384 | vertical-align: middle; |
|---|
| 385 | } |
|---|
| 386 | |
|---|
| 387 | textarea{ |
|---|
| 388 | font-family: Geneva,Arial; |
|---|
| 389 | font-size: larger; |
|---|
| 390 | } |
|---|
| 391 | |
|---|
| 392 | .QuestionText{ |
|---|
| 393 | |
|---|
| 394 | } |
|---|
| 395 | |
|---|
| 396 | .Answer{ |
|---|
| 397 | font-size: 120%; |
|---|
| 398 | letter-spacing: 0.1em; |
|---|
| 399 | } |
|---|
| 400 | |
|---|
| 401 | .Highlight{ |
|---|
| 402 | color: #000000; |
|---|
| 403 | background-color: #ffff00; |
|---|
| 404 | font-weight: bold; |
|---|
| 405 | font-size: 120%; |
|---|
| 406 | } |
|---|
| 407 | |
|---|
| 408 | ol.QuizQuestions{ |
|---|
| 409 | text-align: left; |
|---|
| 410 | list-style-type: none; |
|---|
| 411 | } |
|---|
| 412 | |
|---|
| 413 | li.QuizQuestion{ |
|---|
| 414 | padding: 1em; |
|---|
| 415 | border-style: solid; |
|---|
| 416 | border-width: 0px 0px 1px 0px; |
|---|
| 417 | } |
|---|
| 418 | |
|---|
| 419 | ol.MCAnswers{ |
|---|
| 420 | text-align: left; |
|---|
| 421 | list-style-type: upper-alpha; |
|---|
| 422 | padding: 1em; |
|---|
| 423 | } |
|---|
| 424 | |
|---|
| 425 | ol.MCAnswers li{ |
|---|
| 426 | margin-bottom: 1em; |
|---|
| 427 | } |
|---|
| 428 | |
|---|
| 429 | ol.MSelAnswers{ |
|---|
| 430 | text-align: left; |
|---|
| 431 | list-style-type: lower-alpha; |
|---|
| 432 | padding: 1em; |
|---|
| 433 | } |
|---|
| 434 | |
|---|
| 435 | div.ShortAnswer{ |
|---|
| 436 | padding: 1em; |
|---|
| 437 | } |
|---|
| 438 | |
|---|
| 439 | div.StdDiv{ |
|---|
| 440 | background-color: #EECCEE; |
|---|
| 441 | text-align: center; |
|---|
| 442 | font-size: small; |
|---|
| 443 | color: #330033; |
|---|
| 444 | padding: 8px; |
|---|
| 445 | border-style: solid; |
|---|
| 446 | border-width: 1px 1px 1px 1px; |
|---|
| 447 | border-color: #330033; |
|---|
| 448 | margin: 1px; |
|---|
| 449 | } |
|---|
| 450 | |
|---|
| 451 | .FuncButton { |
|---|
| 452 | text-align: center; |
|---|
| 453 | border-style: solid; |
|---|
| 454 | |
|---|
| 455 | border-left-color: #f6e5f6; |
|---|
| 456 | border-top-color: #f6e5f6; |
|---|
| 457 | border-right-color: #776677; |
|---|
| 458 | border-bottom-color: #776677; |
|---|
| 459 | color: #330033; |
|---|
| 460 | background-color: #EECCEE; |
|---|
| 461 | |
|---|
| 462 | border-width: 2px; |
|---|
| 463 | padding: 3px 6px 3px 6px; |
|---|
| 464 | cursor: pointer; |
|---|
| 465 | } |
|---|
| 466 | |
|---|
| 467 | .FuncButtonUp { |
|---|
| 468 | color: #EECCEE; |
|---|
| 469 | text-align: center; |
|---|
| 470 | border-style: solid; |
|---|
| 471 | |
|---|
| 472 | border-left-color: #f6e5f6; |
|---|
| 473 | border-top-color: #f6e5f6; |
|---|
| 474 | border-right-color: #776677; |
|---|
| 475 | border-bottom-color: #776677; |
|---|
| 476 | |
|---|
| 477 | background-color: #330033; |
|---|
| 478 | color: #EECCEE; |
|---|
| 479 | border-width: 2px; |
|---|
| 480 | padding: 3px 6px 3px 6px; |
|---|
| 481 | cursor: pointer; |
|---|
| 482 | } |
|---|
| 483 | |
|---|
| 484 | .FuncButtonDown { |
|---|
| 485 | color: #EECCEE; |
|---|
| 486 | text-align: center; |
|---|
| 487 | border-style: solid; |
|---|
| 488 | |
|---|
| 489 | border-left-color: #776677; |
|---|
| 490 | border-top-color: #776677; |
|---|
| 491 | border-right-color: #f6e5f6; |
|---|
| 492 | border-bottom-color: #f6e5f6; |
|---|
| 493 | background-color: #330033; |
|---|
| 494 | color: #EECCEE; |
|---|
| 495 | |
|---|
| 496 | border-width: 2px; |
|---|
| 497 | padding: 3px 6px 3px 6px; |
|---|
| 498 | cursor: pointer; |
|---|
| 499 | } |
|---|
| 500 | |
|---|
| 501 | /*BeginNavBarStyle*/ |
|---|
| 502 | |
|---|
| 503 | div.NavButtonBar{ |
|---|
| 504 | background-color: #330033; |
|---|
| 505 | text-align: center; |
|---|
| 506 | margin: 2px 0px 2px 0px; |
|---|
| 507 | clear: both; |
|---|
| 508 | font-size: small; |
|---|
| 509 | } |
|---|
| 510 | |
|---|
| 511 | .NavButton { |
|---|
| 512 | border-style: solid; |
|---|
| 513 | |
|---|
| 514 | border-left-color: #997f99; |
|---|
| 515 | border-top-color: #997f99; |
|---|
| 516 | border-right-color: #190019; |
|---|
| 517 | border-bottom-color: #190019; |
|---|
| 518 | background-color: #330033; |
|---|
| 519 | color: #ffffff; |
|---|
| 520 | |
|---|
| 521 | border-width: 2px; |
|---|
| 522 | cursor: pointer; |
|---|
| 523 | } |
|---|
| 524 | |
|---|
| 525 | .NavButtonUp { |
|---|
| 526 | border-style: solid; |
|---|
| 527 | |
|---|
| 528 | border-left-color: #997f99; |
|---|
| 529 | border-top-color: #997f99; |
|---|
| 530 | border-right-color: #190019; |
|---|
| 531 | border-bottom-color: #190019; |
|---|
| 532 | color: #330033; |
|---|
| 533 | background-color: #ffffff; |
|---|
| 534 | |
|---|
| 535 | border-width: 2px; |
|---|
| 536 | cursor: pointer; |
|---|
| 537 | } |
|---|
| 538 | |
|---|
| 539 | .NavButtonDown { |
|---|
| 540 | border-style: solid; |
|---|
| 541 | |
|---|
| 542 | border-left-color: #190019; |
|---|
| 543 | border-top-color: #190019; |
|---|
| 544 | border-right-color: #997f99; |
|---|
| 545 | border-bottom-color: #997f99; |
|---|
| 546 | color: #330033; |
|---|
| 547 | background-color: #ffffff; |
|---|
| 548 | |
|---|
| 549 | border-width: 2px; |
|---|
| 550 | cursor: pointer; |
|---|
| 551 | } |
|---|
| 552 | |
|---|
| 553 | /*EndNavBarStyle*/ |
|---|
| 554 | |
|---|
| 555 | a{ |
|---|
| 556 | color: #0000CC; |
|---|
| 557 | } |
|---|
| 558 | |
|---|
| 559 | a: visited{ |
|---|
| 560 | color: #0000FF; |
|---|
| 561 | } |
|---|
| 562 | |
|---|
| 563 | a:hover{ |
|---|
| 564 | color: #0000CC; |
|---|
| 565 | } |
|---|
| 566 | |
|---|
| 567 | div.CardStyle { |
|---|
| 568 | position: absolute; |
|---|
| 569 | font-family: Geneva,Arial; |
|---|
| 570 | font-size: small; |
|---|
| 571 | padding: 5px; |
|---|
| 572 | border-style: solid; |
|---|
| 573 | border-width: 1px; |
|---|
| 574 | color: #330033; |
|---|
| 575 | background-color: #EECCEE; |
|---|
| 576 | left: -50px; |
|---|
| 577 | top: -50px; |
|---|
| 578 | overflow: visible; |
|---|
| 579 | } |
|---|
| 580 | |
|---|
| 581 | .rtl{ |
|---|
| 582 | text-align: right; |
|---|
| 583 | font-size: large; |
|---|
| 584 | } |
|---|
| 585 | |
|---|
| 586 | |
|---|
| 587 | </style> |
|---|
| 588 | |
|---|
| 589 | <script type="text/javascript"> |
|---|
| 590 | |
|---|
| 591 | |
|---|
| 592 | |
|---|
| 593 | <!-- |
|---|
| 594 | |
|---|
| 595 | |
|---|
| 596 | function Client(){ |
|---|
| 597 | |
|---|
| 598 | this.min = false; if (document.getElementById){this.min = true;}; |
|---|
| 599 | |
|---|
| 600 | this.ua = navigator.userAgent; |
|---|
| 601 | this.name = navigator.appName; |
|---|
| 602 | this.ver = navigator.appVersion; |
|---|
| 603 | |
|---|
| 604 | |
|---|
| 605 | this.mac = (this.ver.indexOf('Mac') != -1); |
|---|
| 606 | this.win = (this.ver.indexOf('Windows') != -1); |
|---|
| 607 | |
|---|
| 608 | |
|---|
| 609 | this.gecko = (this.ua.indexOf('Gecko') > 1); |
|---|
| 610 | if (this.gecko){ |
|---|
| 611 | this.geckoVer = parseInt(this.ua.substring(this.ua.indexOf('Gecko')+6, this.ua.length)); |
|---|
| 612 | if (this.geckoVer < 20020000){this.min = false;} |
|---|
| 613 | } |
|---|
| 614 | |
|---|
| 615 | |
|---|
| 616 | this.firebird = (this.ua.indexOf('Firebird') > 1); |
|---|
| 617 | |
|---|
| 618 | |
|---|
| 619 | this.safari = (this.ua.indexOf('Safari') > 1); |
|---|
| 620 | if (this.safari){ |
|---|
| 621 | this.gecko = false; |
|---|
| 622 | } |
|---|
| 623 | |
|---|
| 624 | |
|---|
| 625 | this.ie = (this.ua.indexOf('MSIE') > 0); |
|---|
| 626 | if (this.ie){ |
|---|
| 627 | this.ieVer = parseFloat(this.ua.substring(this.ua.indexOf('MSIE')+5, this.ua.length)); |
|---|
| 628 | if (this.ieVer < 5.5){this.min = false;} |
|---|
| 629 | } |
|---|
| 630 | |
|---|
| 631 | |
|---|
| 632 | this.opera = (this.ua.indexOf('Opera') > 0); |
|---|
| 633 | if (this.opera){ |
|---|
| 634 | this.operaVer = parseFloat(this.ua.substring(this.ua.indexOf('Opera')+6, this.ua.length)); |
|---|
| 635 | if (this.operaVer < 7.04){this.min = false;} |
|---|
| 636 | } |
|---|
| 637 | if (this.min == false){ |
|---|
| 638 | alert('Your browser may not be able to handle this page.'); |
|---|
| 639 | } |
|---|
| 640 | |
|---|
| 641 | |
|---|
| 642 | this.ie5mac = (this.ie&&this.mac&&(this.ieVer<6)); |
|---|
| 643 | } |
|---|
| 644 | |
|---|
| 645 | var C = new Client(); |
|---|
| 646 | |
|---|
| 647 | |
|---|
| 648 | |
|---|
| 649 | |
|---|
| 650 | |
|---|
| 651 | |
|---|
| 652 | |
|---|
| 653 | |
|---|
| 654 | |
|---|
| 655 | |
|---|
| 656 | function NavBtnOver(Btn){ |
|---|
| 657 | if (Btn.className != 'NavButtonDown'){Btn.className = 'NavButtonUp';} |
|---|
| 658 | } |
|---|
| 659 | |
|---|
| 660 | function NavBtnOut(Btn){ |
|---|
| 661 | Btn.className = 'NavButton'; |
|---|
| 662 | } |
|---|
| 663 | |
|---|
| 664 | function NavBtnDown(Btn){ |
|---|
| 665 | Btn.className = 'NavButtonDown'; |
|---|
| 666 | } |
|---|
| 667 | |
|---|
| 668 | |
|---|
| 669 | function FuncBtnOver(Btn){ |
|---|
| 670 | if (Btn.className != 'FuncButtonDown'){Btn.className = 'FuncButtonUp';} |
|---|
| 671 | } |
|---|
| 672 | |
|---|
| 673 | function FuncBtnOut(Btn){ |
|---|
| 674 | Btn.className = 'FuncButton'; |
|---|
| 675 | } |
|---|
| 676 | |
|---|
| 677 | function FuncBtnDown(Btn){ |
|---|
| 678 | Btn.className = 'FuncButtonDown'; |
|---|
| 679 | } |
|---|
| 680 | |
|---|
| 681 | function FocusAButton(){ |
|---|
| 682 | if (document.getElementById('CheckButton1') != null){ |
|---|
| 683 | document.getElementById('CheckButton1').focus(); |
|---|
| 684 | } |
|---|
| 685 | else{ |
|---|
| 686 | if (document.getElementById('CheckButton2') != null){ |
|---|
| 687 | document.getElementById('CheckButton2').focus(); |
|---|
| 688 | } |
|---|
| 689 | else{ |
|---|
| 690 | document.getElementsByTagName('button')[0].focus(); |
|---|
| 691 | } |
|---|
| 692 | } |
|---|
| 693 | } |
|---|
| 694 | |
|---|
| 695 | |
|---|
| 696 | |
|---|
| 697 | |
|---|
| 698 | |
|---|
| 699 | |
|---|
| 700 | var topZ = 1000; |
|---|
| 701 | |
|---|
| 702 | function ShowMessage(Feedback){ |
|---|
| 703 | var Output = Feedback + '<br /><br />'; |
|---|
| 704 | document.getElementById('FeedbackContent').innerHTML = Output; |
|---|
| 705 | var FDiv = document.getElementById('FeedbackDiv'); |
|---|
| 706 | topZ++; |
|---|
| 707 | FDiv.style.zIndex = topZ; |
|---|
| 708 | FDiv.style.top = TopSettingWithScrollOffset(30) + 'px'; |
|---|
| 709 | |
|---|
| 710 | if (C.gecko){ |
|---|
| 711 | document.getElementById('FeedbackOKButton').focus(); |
|---|
| 712 | } |
|---|
| 713 | FDiv.style.display = 'block'; |
|---|
| 714 | |
|---|
| 715 | ShowElements(false, 'input'); |
|---|
| 716 | ShowElements(false, 'select'); |
|---|
| 717 | ShowElements(false, 'object'); |
|---|
| 718 | if (C.ie){ |
|---|
| 719 | document.getElementById('FeedbackOKButton').focus(); |
|---|
| 720 | } |
|---|
| 721 | |
|---|
| 722 | |
|---|
| 723 | } |
|---|
| 724 | |
|---|
| 725 | function ShowElements(Show, TagName){ |
|---|
| 726 | |
|---|
| 727 | if (C.ie){ |
|---|
| 728 | var Els = document.getElementsByTagName(TagName); |
|---|
| 729 | for (var i=0; i<Els.length; i++){ |
|---|
| 730 | if (Show == true){ |
|---|
| 731 | Els[i].style.display = 'inline'; |
|---|
| 732 | } |
|---|
| 733 | else{ |
|---|
| 734 | Els[i].style.display = 'none'; |
|---|
| 735 | } |
|---|
| 736 | } |
|---|
| 737 | } |
|---|
| 738 | } |
|---|
| 739 | |
|---|
| 740 | function HideFeedback(){ |
|---|
| 741 | document.getElementById('FeedbackDiv').style.display = 'none'; |
|---|
| 742 | ShowElements(true, 'input'); |
|---|
| 743 | ShowElements(true, 'select'); |
|---|
| 744 | ShowElements(true, 'object'); |
|---|
| 745 | if (Finished == true){ |
|---|
| 746 | Finish(); |
|---|
| 747 | } |
|---|
| 748 | } |
|---|
| 749 | |
|---|
| 750 | |
|---|
| 751 | |
|---|
| 752 | |
|---|
| 753 | |
|---|
| 754 | function PageDim(){ |
|---|
| 755 | |
|---|
| 756 | this.W = 600; |
|---|
| 757 | this.H = 400; |
|---|
| 758 | this.W = document.getElementsByTagName('body')[0].clientWidth; |
|---|
| 759 | this.H = document.getElementsByTagName('body')[0].clientHeight; |
|---|
| 760 | } |
|---|
| 761 | |
|---|
| 762 | var pg = null; |
|---|
| 763 | |
|---|
| 764 | function GetPageXY(El) { |
|---|
| 765 | var XY = {x: 0, y: 0}; |
|---|
| 766 | while(El){ |
|---|
| 767 | XY.x += El.offsetLeft; |
|---|
| 768 | XY.y += El.offsetTop; |
|---|
| 769 | El = El.offsetParent; |
|---|
| 770 | } |
|---|
| 771 | return XY; |
|---|
| 772 | } |
|---|
| 773 | |
|---|
| 774 | function GetScrollTop(){ |
|---|
| 775 | if (document.documentElement && document.documentElement.scrollTop){ |
|---|
| 776 | return document.documentElement.scrollTop; |
|---|
| 777 | } |
|---|
| 778 | else{ |
|---|
| 779 | if (document.body){ |
|---|
| 780 | return document.body.scrollTop; |
|---|
| 781 | } |
|---|
| 782 | else{ |
|---|
| 783 | return window.pageYOffset; |
|---|
| 784 | } |
|---|
| 785 | } |
|---|
| 786 | } |
|---|
| 787 | |
|---|
| 788 | function GetViewportHeight(){ |
|---|
| 789 | if (window.innerWidth){ |
|---|
| 790 | return window.innerWidth; |
|---|
| 791 | } |
|---|
| 792 | else{ |
|---|
| 793 | return document.getElementsByTagName('body')[0].clientHeight; |
|---|
| 794 | } |
|---|
| 795 | } |
|---|
| 796 | |
|---|
| 797 | function TopSettingWithScrollOffset(TopPercent){ |
|---|
| 798 | var T = Math.floor(GetViewportHeight() * (TopPercent/100)); |
|---|
| 799 | return GetScrollTop() + T; |
|---|
| 800 | } |
|---|
| 801 | |
|---|
| 802 | |
|---|
| 803 | var InTextBox = false; |
|---|
| 804 | |
|---|
| 805 | function SuppressBackspace(e){ |
|---|
| 806 | if (InTextBox == true){return;} |
|---|
| 807 | if (C.ie) { |
|---|
| 808 | thisKey = window.event.keyCode; |
|---|
| 809 | } |
|---|
| 810 | else { |
|---|
| 811 | thisKey = e.keyCode; |
|---|
| 812 | } |
|---|
| 813 | |
|---|
| 814 | var Suppress = false; |
|---|
| 815 | |
|---|
| 816 | if (thisKey == 8) { |
|---|
| 817 | Suppress = true; |
|---|
| 818 | } |
|---|
| 819 | |
|---|
| 820 | if (Suppress == true){ |
|---|
| 821 | if (C.ie){ |
|---|
| 822 | window.event.returnValue = false; |
|---|
| 823 | window.event.cancelBubble = true; |
|---|
| 824 | } |
|---|
| 825 | else{ |
|---|
| 826 | e.preventDefault(); |
|---|
| 827 | } |
|---|
| 828 | } |
|---|
| 829 | } |
|---|
| 830 | |
|---|
| 831 | if (C.ie){ |
|---|
| 832 | document.attachEvent('onkeydown',SuppressBackspace); |
|---|
| 833 | window.attachEvent('onkeydown',SuppressBackspace); |
|---|
| 834 | } |
|---|
| 835 | else{ |
|---|
| 836 | window.addEventListener('keypress',SuppressBackspace,false); |
|---|
| 837 | } |
|---|
| 838 | |
|---|
| 839 | function ReduceItems(InArray, ReduceToSize){ |
|---|
| 840 | var ItemToDump=0; |
|---|
| 841 | var j=0; |
|---|
| 842 | while (InArray.length > ReduceToSize){ |
|---|
| 843 | ItemToDump = Math.floor(InArray.length*Math.random()); |
|---|
| 844 | InArray.splice(ItemToDump, 1); |
|---|
| 845 | } |
|---|
| 846 | } |
|---|
| 847 | |
|---|
| 848 | function Shuffle(InArray){ |
|---|
| 849 | Temp = new Array(); |
|---|
| 850 | var Len = InArray.length; |
|---|
| 851 | |
|---|
| 852 | var j = Len; |
|---|
| 853 | |
|---|
| 854 | for (var i=0; i<Len; i++){ |
|---|
| 855 | Temp[i] = InArray[i]; |
|---|
| 856 | } |
|---|
| 857 | |
|---|
| 858 | for (i=0; i<Len; i++){ |
|---|
| 859 | Num = Math.floor(j * Math.random()); |
|---|
| 860 | InArray[i] = Temp[Num]; |
|---|
| 861 | |
|---|
| 862 | for (var k=Num; k < j; k++) { |
|---|
| 863 | Temp[k] = Temp[k+1]; |
|---|
| 864 | } |
|---|
| 865 | j--; |
|---|
| 866 | } |
|---|
| 867 | return InArray; |
|---|
| 868 | } |
|---|
| 869 | |
|---|
| 870 | function WriteToInstructions(Feedback) { |
|---|
| 871 | |
|---|
| 872 | document.getElementById('InstructionsDiv').innerHTML = Feedback; |
|---|
| 873 | |
|---|
| 874 | } |
|---|
| 875 | |
|---|
| 876 | |
|---|
| 877 | |
|---|
| 878 | |
|---|
| 879 | function EscapeDoubleQuotes(InString){ |
|---|
| 880 | return InString.replace(/"/g, '"') |
|---|
| 881 | } |
|---|
| 882 | |
|---|
| 883 | function FocusAButton(){ |
|---|
| 884 | if (document.getElementById('CheckButton1') != null){ |
|---|
| 885 | document.getElementById('CheckButton1').focus(); |
|---|
| 886 | } |
|---|
| 887 | else{ |
|---|
| 888 | document.getElementsByTagName('button')[0].focus(); |
|---|
| 889 | } |
|---|
| 890 | } |
|---|
| 891 | |
|---|
| 892 | function TrimString(InString){ |
|---|
| 893 | var x = 0; |
|---|
| 894 | |
|---|
| 895 | if (InString.length != 0) { |
|---|
| 896 | while ((InString.charAt(InString.length - 1) == '\u0020') || (InString.charAt(InString.length - 1) == '\u000A') || (InString.charAt(InString.length - 1) == '\u000D')){ |
|---|
| 897 | InString = InString.substring(0, InString.length - 1) |
|---|
| 898 | } |
|---|
| 899 | |
|---|
| 900 | while ((InString.charAt(0) == '\u0020') || (InString.charAt(0) == '\u000A') || (InString.charAt(0) == '\u000D')){ |
|---|
| 901 | InString = InString.substring(1, InString.length) |
|---|
| 902 | } |
|---|
| 903 | |
|---|
| 904 | while (InString.indexOf(' ') != -1) { |
|---|
| 905 | x = InString.indexOf(' ') |
|---|
| 906 | InString = InString.substring(0, x) + InString.substring(x+1, InString.length) |
|---|
| 907 | } |
|---|
| 908 | |
|---|
| 909 | return InString; |
|---|
| 910 | } |
|---|
| 911 | |
|---|
| 912 | else { |
|---|
| 913 | return ''; |
|---|
| 914 | } |
|---|
| 915 | } |
|---|
| 916 | |
|---|
| 917 | function FindLongest(InArray){ |
|---|
| 918 | if (InArray.length < 1){return -1;} |
|---|
| 919 | |
|---|
| 920 | var Longest = 0; |
|---|
| 921 | for (var i=1; i<InArray.length; i++){ |
|---|
| 922 | if (InArray[i].length > InArray[Longest].length){ |
|---|
| 923 | Longest = i; |
|---|
| 924 | } |
|---|
| 925 | } |
|---|
| 926 | return Longest; |
|---|
| 927 | } |
|---|
| 928 | |
|---|
| 929 | //UNICODE CHARACTER FUNCTIONS |
|---|
| 930 | function IsCombiningDiacritic(CharNum){ |
|---|
| 931 | var Result = (((CharNum >= 0x0300)&&(CharNum <= 0x370))||((CharNum >= 0x20d0)&&(CharNum <= 0x20ff))); |
|---|
| 932 | Result = Result || (((CharNum >= 0x3099)&&(CharNum <= 0x309a))||((CharNum >= 0xfe20)&&(CharNum <= 0xfe23))); |
|---|
| 933 | return Result; |
|---|
| 934 | } |
|---|
| 935 | |
|---|
| 936 | function IsCJK(CharNum){ |
|---|
| 937 | return ((CharNum >= 0x3000)&&(CharNum < 0xd800)); |
|---|
| 938 | } |
|---|
| 939 | |
|---|
| 940 | //SETUP FUNCTIONS |
|---|
| 941 | //BROWSER WILL REFILL TEXT BOXES FROM CACHE IF NOT PREVENTED |
|---|
| 942 | function ClearTextBoxes(){ |
|---|
| 943 | var NList = document.getElementsByTagName('input'); |
|---|
| 944 | for (var i=0; i<NList.length; i++){ |
|---|
| 945 | if (NList[i].id.indexOf('Guess') > -1){ |
|---|
| 946 | NList[i].value = ''; |
|---|
| 947 | } |
|---|
| 948 | if (NList[i].id.indexOf('Chk') > -1){ |
|---|
| 949 | NList[i].checked = ''; |
|---|
| 950 | } |
|---|
| 951 | } |
|---|
| 952 | } |
|---|
| 953 | |
|---|
| 954 | //EXTENSION TO ARRAY OBJECT |
|---|
| 955 | function Array_IndexOf(Input){ |
|---|
| 956 | var Result = -1; |
|---|
| 957 | for (var i=0; i<this.length; i++){ |
|---|
| 958 | if (this[i] == Input){ |
|---|
| 959 | Result = i; |
|---|
| 960 | } |
|---|
| 961 | } |
|---|
| 962 | return Result; |
|---|
| 963 | } |
|---|
| 964 | Array.prototype.indexOf = Array_IndexOf; |
|---|
| 965 | |
|---|
| 966 | //IE HAS RENDERING BUG WITH BOTTOM NAVBAR |
|---|
| 967 | function RemoveBottomNavBarForIE(){ |
|---|
| 968 | if (C.ie){ |
|---|
| 969 | if (document.getElementById('BottomNavBar') != null){ |
|---|
| 970 | document.getElementById('TheBody').removeChild(document.getElementById('BottomNavBar')); |
|---|
| 971 | } |
|---|
| 972 | } |
|---|
| 973 | } |
|---|
| 974 | |
|---|
| 975 | |
|---|
| 976 | |
|---|
| 977 | |
|---|
| 978 | //HOTPOTNET-RELATED CODE |
|---|
| 979 | |
|---|
| 980 | var HPNStartTime = (new Date()).getTime(); |
|---|
| 981 | var SubmissionTimeout = 30000; |
|---|
| 982 | var Detail = ''; //Global that is used to submit tracking data |
|---|
| 983 | |
|---|
| 984 | function Finish(){ |
|---|
| 985 | //If there's a form, fill it out and submit it |
|---|
| 986 | if (document.store != null){ |
|---|
| 987 | Frm = document.store; |
|---|
| 988 | Frm.starttime.value = HPNStartTime; |
|---|
| 989 | Frm.endtime.value = (new Date()).getTime(); |
|---|
| 990 | Frm.mark.value = Score; |
|---|
| 991 | Frm.detail.value = Detail; |
|---|
| 992 | Frm.submit(); |
|---|
| 993 | } |
|---|
| 994 | } |
|---|
| 995 | |
|---|
| 996 | |
|---|
| 997 | |
|---|
| 998 | function Card(ID, OverlapTolerance){ |
|---|
| 999 | this.elm=document.getElementById(ID); |
|---|
| 1000 | this.name=ID; |
|---|
| 1001 | this.css=this.elm.style; |
|---|
| 1002 | this.elm.style.left = 0 +'px'; |
|---|
| 1003 | this.elm.style.top = 0 +'px'; |
|---|
| 1004 | this.HomeL = 0; |
|---|
| 1005 | this.HomeT = 0; |
|---|
| 1006 | this.tag=-1; |
|---|
| 1007 | this.index=-1; |
|---|
| 1008 | this.OverlapTolerance = OverlapTolerance; |
|---|
| 1009 | } |
|---|
| 1010 | |
|---|
| 1011 | function CardGetL(){return parseInt(this.css.left)} |
|---|
| 1012 | Card.prototype.GetL=CardGetL; |
|---|
| 1013 | |
|---|
| 1014 | function CardGetT(){return parseInt(this.css.top)} |
|---|
| 1015 | Card.prototype.GetT=CardGetT; |
|---|
| 1016 | |
|---|
| 1017 | function CardGetW(){return parseInt(this.elm.offsetWidth)} |
|---|
| 1018 | Card.prototype.GetW=CardGetW; |
|---|
| 1019 | |
|---|
| 1020 | function CardGetH(){return parseInt(this.elm.offsetHeight)} |
|---|
| 1021 | Card.prototype.GetH=CardGetH; |
|---|
| 1022 | |
|---|
| 1023 | function CardGetB(){return this.GetT()+this.GetH()} |
|---|
| 1024 | Card.prototype.GetB=CardGetB; |
|---|
| 1025 | |
|---|
| 1026 | function CardGetR(){return this.GetL()+this.GetW()} |
|---|
| 1027 | Card.prototype.GetR=CardGetR; |
|---|
| 1028 | |
|---|
| 1029 | function CardSetL(NewL){this.css.left = NewL+'px'} |
|---|
| 1030 | Card.prototype.SetL=CardSetL; |
|---|
| 1031 | |
|---|
| 1032 | function CardSetT(NewT){this.css.top = NewT+'px'} |
|---|
| 1033 | Card.prototype.SetT=CardSetT; |
|---|
| 1034 | |
|---|
| 1035 | function CardSetW(NewW){this.css.width = NewW+'px'} |
|---|
| 1036 | Card.prototype.SetW=CardSetW; |
|---|
| 1037 | |
|---|
| 1038 | function CardSetH(NewH){this.css.height = NewH+'px'} |
|---|
| 1039 | Card.prototype.SetH=CardSetH; |
|---|
| 1040 | |
|---|
| 1041 | function CardInside(X,Y){ |
|---|
| 1042 | var Result=false; |
|---|
| 1043 | if(X>=this.GetL()){if(X<=this.GetR()){if(Y>=this.GetT()){if(Y<=this.GetB()){Result=true;}}}} |
|---|
| 1044 | return Result; |
|---|
| 1045 | } |
|---|
| 1046 | Card.prototype.Inside=CardInside; |
|---|
| 1047 | |
|---|
| 1048 | function CardSwapColours(){ |
|---|
| 1049 | var c=this.css.backgroundColor; |
|---|
| 1050 | this.css.backgroundColor=this.css.color; |
|---|
| 1051 | this.css.color=c; |
|---|
| 1052 | } |
|---|
| 1053 | Card.prototype.SwapColours=CardSwapColours; |
|---|
| 1054 | |
|---|
| 1055 | function CardHighlight(){ |
|---|
| 1056 | this.css.backgroundColor='#330033'; |
|---|
| 1057 | this.css.color='#EECCEE'; |
|---|
| 1058 | } |
|---|
| 1059 | Card.prototype.Highlight=CardHighlight; |
|---|
| 1060 | |
|---|
| 1061 | function CardUnhighlight(){ |
|---|
| 1062 | this.css.backgroundColor='#EECCEE'; |
|---|
| 1063 | this.css.color='#330033'; |
|---|
| 1064 | } |
|---|
| 1065 | Card.prototype.Unhighlight=CardUnhighlight; |
|---|
| 1066 | |
|---|
| 1067 | function CardOverlap(OtherCard){ |
|---|
| 1068 | var smR=(this.GetR()<(OtherCard.GetR()+this.OverlapTolerance))? this.GetR(): (OtherCard.GetR()+this.OverlapTolerance); |
|---|
| 1069 | var lgL=(this.GetL()>OtherCard.GetL())? this.GetL(): OtherCard.GetL(); |
|---|
| 1070 | var HDim=smR-lgL; |
|---|
| 1071 | if (HDim<1){return 0;} |
|---|
| 1072 | var smB=(this.GetB()<OtherCard.GetB())? this.GetB(): OtherCard.GetB(); |
|---|
| 1073 | var lgT=(this.GetT()>OtherCard.GetT())? this.GetT(): OtherCard.GetT(); |
|---|
| 1074 | var VDim=smB-lgT; |
|---|
| 1075 | if (VDim<1){return 0;} |
|---|
| 1076 | return (HDim*VDim); |
|---|
| 1077 | } |
|---|
| 1078 | Card.prototype.Overlap=CardOverlap; |
|---|
| 1079 | |
|---|
| 1080 | function CardDockToR(OtherCard){ |
|---|
| 1081 | this.SetL(OtherCard.GetR() + 5); |
|---|
| 1082 | this.SetT(OtherCard.GetT()); |
|---|
| 1083 | } |
|---|
| 1084 | |
|---|
| 1085 | Card.prototype.DockToR=CardDockToR; |
|---|
| 1086 | |
|---|
| 1087 | function CardSetHome(){ |
|---|
| 1088 | this.HomeL=this.GetL(); |
|---|
| 1089 | this.HomeT=this.GetT(); |
|---|
| 1090 | } |
|---|
| 1091 | Card.prototype.SetHome=CardSetHome; |
|---|
| 1092 | |
|---|
| 1093 | function CardGoHome(){ |
|---|
| 1094 | this.SetL(this.HomeL); |
|---|
| 1095 | this.SetT(this.HomeT); |
|---|
| 1096 | } |
|---|
| 1097 | |
|---|
| 1098 | Card.prototype.GoHome=CardGoHome; |
|---|
| 1099 | |
|---|
| 1100 | |
|---|
| 1101 | function doDrag(e) { |
|---|
| 1102 | if (CurrDrag == -1) {return}; |
|---|
| 1103 | if (C.ie){var Ev = window.event}else{var Ev = e} |
|---|
| 1104 | var difX = Ev.clientX-window.lastX; |
|---|
| 1105 | var difY = Ev.clientY-window.lastY; |
|---|
| 1106 | var newX = DC[CurrDrag].GetL()+difX; |
|---|
| 1107 | var newY = DC[CurrDrag].GetT()+difY; |
|---|
| 1108 | DC[CurrDrag].SetL(newX); |
|---|
| 1109 | DC[CurrDrag].SetT(newY); |
|---|
| 1110 | window.lastX = Ev.clientX; |
|---|
| 1111 | window.lastY = Ev.clientY; |
|---|
| 1112 | return false; |
|---|
| 1113 | } |
|---|
| 1114 | |
|---|
| 1115 | function beginDrag(e, DragNum) { |
|---|
| 1116 | CurrDrag = DragNum; |
|---|
| 1117 | if (C.ie){ |
|---|
| 1118 | var Ev = window.event; |
|---|
| 1119 | document.onmousemove=doDrag; |
|---|
| 1120 | document.onmouseup=endDrag; |
|---|
| 1121 | } |
|---|
| 1122 | else{ |
|---|
| 1123 | var Ev = e; |
|---|
| 1124 | window.onmousemove=doDrag; |
|---|
| 1125 | window.onmouseup=endDrag; |
|---|
| 1126 | } |
|---|
| 1127 | DC[CurrDrag].Highlight(); |
|---|
| 1128 | topZ++; |
|---|
| 1129 | DC[CurrDrag].css.zIndex = topZ; |
|---|
| 1130 | window.lastX=Ev.clientX; |
|---|
| 1131 | window.lastY=Ev.clientY; |
|---|
| 1132 | return false; |
|---|
| 1133 | } |
|---|
| 1134 | |
|---|
| 1135 | function endDrag(e) { |
|---|
| 1136 | if (CurrDrag == -1) {return}; |
|---|
| 1137 | DC[CurrDrag].Unhighlight(); |
|---|
| 1138 | if (C.ie){document.onmousemove=null}else{window.onmousemove=null;} |
|---|
| 1139 | onEndDrag(); |
|---|
| 1140 | CurrDrag = -1; |
|---|
| 1141 | return true; |
|---|
| 1142 | } |
|---|
| 1143 | |
|---|
| 1144 | var CurrDrag = -1; |
|---|
| 1145 | var topZ = 100; |
|---|
| 1146 | |
|---|
| 1147 | |
|---|
| 1148 | |
|---|
| 1149 | //JMIX DRAG-DROP OUTPUT FORMAT CODE |
|---|
| 1150 | |
|---|
| 1151 | var Punctuation = ''; |
|---|
| 1152 | |
|---|
| 1153 | var Openers = ''; |
|---|
| 1154 | var CorrectResponse = 'Correcto'; |
|---|
| 1155 | var IncorrectResponse = 'Lo siento, pruebe otra vez'; |
|---|
| 1156 | var ThisMuchCorrect = 'Esta parte de su respuesta es correcta'; |
|---|
| 1157 | var TheseAnswersToo = 'Esta respuesta también es correcta'; |
|---|
| 1158 | var YourScoreIs = 'Su puntuación es'; |
|---|
| 1159 | var NextCorrect = 'La siguiente letra correcta es:'; |
|---|
| 1160 | var FeedbackWidth = 200; //default |
|---|
| 1161 | var ExBGColor = '#EECCEE'; |
|---|
| 1162 | var PageBGColor = '#FFFFFF'; |
|---|
| 1163 | var TextColor = '#330033'; |
|---|
| 1164 | var TitleColor = '#660066'; |
|---|
| 1165 | var DropTotal = 3; // number of lines that will be available for dropping on |
|---|
| 1166 | var Gap = 4; //Gap between two segments when they're next to each other on a line |
|---|
| 1167 | var DropHeight = 30; |
|---|
| 1168 | var CapitalizeFirst = false; |
|---|
| 1169 | var CompiledOutput = ''; |
|---|
| 1170 | var TempSegment = ''; |
|---|
| 1171 | var FirstSegment = -1; |
|---|
| 1172 | var FirstDiv = -1; |
|---|
| 1173 | var Penalties = 0; |
|---|
| 1174 | var Score = 0; |
|---|
| 1175 | |
|---|
| 1176 | var CurrDrag = -1; |
|---|
| 1177 | var topZ = 100; |
|---|
| 1178 | var Cds = new Array(); |
|---|
| 1179 | var L = new Array(); |
|---|
| 1180 | var Finished = false; |
|---|
| 1181 | |
|---|
| 1182 | var Locked = false; |
|---|
| 1183 | var Interval = null; |
|---|
| 1184 | var DivWidth = 600; |
|---|
| 1185 | var LeftColPos = 100; |
|---|
| 1186 | var DragTop = 120; |
|---|
| 1187 | var DragNumber = -1; |
|---|
| 1188 | |
|---|
| 1189 | Lines = new Array(); |
|---|
| 1190 | |
|---|
| 1191 | function CapFirst(InString){ |
|---|
| 1192 | var i = 0; |
|---|
| 1193 | if ((Openers.indexOf(InString.charAt(i))>-1)||(InString.charAt(i) == ' ')){ |
|---|
| 1194 | i++; |
|---|
| 1195 | } |
|---|
| 1196 | if ((Openers.indexOf(InString.charAt(i))>-1)||(InString.charAt(i) == ' ')){ |
|---|
| 1197 | i++; |
|---|
| 1198 | } |
|---|
| 1199 | var Temp = InString.charAt(i); |
|---|
| 1200 | Temp = Temp.toUpperCase(); |
|---|
| 1201 | InString = InString.substring(0, i) + Temp + InString.substring(i+1, InString.length); |
|---|
| 1202 | return InString; |
|---|
| 1203 | } |
|---|
| 1204 | |
|---|
| 1205 | function CheckResults(ChkType){ |
|---|
| 1206 | //Get sequence student has chosen |
|---|
| 1207 | GetGuessSequence(); |
|---|
| 1208 | |
|---|
| 1209 | //Compile the answer |
|---|
| 1210 | CompiledOutput = CompileString(GuessSequence); |
|---|
| 1211 | |
|---|
| 1212 | //Check the answer |
|---|
| 1213 | CheckAnswer(ChkType); |
|---|
| 1214 | } |
|---|
| 1215 | |
|---|
| 1216 | function GetGuessSequence(){ |
|---|
| 1217 | //Put pointers to draggables in arrays based on the lines they're sitting on |
|---|
| 1218 | var Drops = new Array(); |
|---|
| 1219 | for (var i=0; i<L.length; i++){ |
|---|
| 1220 | Drops[i] = new Array(); |
|---|
| 1221 | } |
|---|
| 1222 | |
|---|
| 1223 | for (i=0; i<Cds.length; i++){ |
|---|
| 1224 | for (var j=0; j<L.length; j++){ |
|---|
| 1225 | if (Cds[i].GetT() == L[j].GetB() - (Cds[i].GetH()+2)){ |
|---|
| 1226 | Drops[j][Drops[j].length] = Cds[i]; |
|---|
| 1227 | } |
|---|
| 1228 | } |
|---|
| 1229 | } |
|---|
| 1230 | |
|---|
| 1231 | //Sort the drop arrays based on the Left of each div |
|---|
| 1232 | for (i=0; i<Drops.length; i++){ |
|---|
| 1233 | Drops[i].sort(CompDrags); |
|---|
| 1234 | } |
|---|
| 1235 | |
|---|
| 1236 | //Put the tags into the GuessSequence array |
|---|
| 1237 | GuessSequence.length = 0; |
|---|
| 1238 | for (i=0; i<Drops.length; i++){ |
|---|
| 1239 | for (j=0; j<Drops[i].length; j++){ |
|---|
| 1240 | GuessSequence[GuessSequence.length] = Drops[i][j].tag; |
|---|
| 1241 | } |
|---|
| 1242 | } |
|---|
| 1243 | |
|---|
| 1244 | //Set the variable recording which div is first |
|---|
| 1245 | var NewFirstDiv = -1; |
|---|
| 1246 | for (i=0; i<Drops.length; i++){ |
|---|
| 1247 | if (Drops[i].length > 0){ |
|---|
| 1248 | NewFirstDiv = Drops[i][0].index; |
|---|
| 1249 | break; |
|---|
| 1250 | } |
|---|
| 1251 | } |
|---|
| 1252 | return NewFirstDiv; |
|---|
| 1253 | } |
|---|
| 1254 | |
|---|
| 1255 | function CompDrags(a,b){ |
|---|
| 1256 | return a.GetL() - b.GetL(); |
|---|
| 1257 | } |
|---|
| 1258 | |
|---|
| 1259 | function FindSegment(SegID){ |
|---|
| 1260 | var Seg = ''; |
|---|
| 1261 | for (var i=0; i<Segments.length; i++){ |
|---|
| 1262 | if (Segments[i][1] == SegID){ |
|---|
| 1263 | Seg = Segments[i][0]; |
|---|
| 1264 | break; |
|---|
| 1265 | } |
|---|
| 1266 | } |
|---|
| 1267 | return Seg; |
|---|
| 1268 | } |
|---|
| 1269 | |
|---|
| 1270 | function CompileString(InArray){ |
|---|
| 1271 | var OutString = ''; |
|---|
| 1272 | var i = 0; |
|---|
| 1273 | OutArray = new Array(); |
|---|
| 1274 | |
|---|
| 1275 | for (i=0; i<InArray.length; i++){ |
|---|
| 1276 | OutArray[OutArray.length] = FindSegment(InArray[i]); |
|---|
| 1277 | } |
|---|
| 1278 | |
|---|
| 1279 | if (OutArray.length > 0){ |
|---|
| 1280 | OutString = OutArray[0]; |
|---|
| 1281 | } |
|---|
| 1282 | else{ |
|---|
| 1283 | OutString = ''; |
|---|
| 1284 | } |
|---|
| 1285 | var Spacer = ''; |
|---|
| 1286 | |
|---|
| 1287 | for (i=1; i<OutArray.length; i++){ |
|---|
| 1288 | Spacer = ' '; |
|---|
| 1289 | if ((Openers.indexOf(OutString.charAt(OutString.length-1)) > -1)||(Punctuation.indexOf(OutArray[i].charAt(0)) > -1)){ |
|---|
| 1290 | Spacer = ''; |
|---|
| 1291 | } |
|---|
| 1292 | OutString = OutString + Spacer + OutArray[i]; |
|---|
| 1293 | } |
|---|
| 1294 | |
|---|
| 1295 | //Capitalize the first letter if necessary |
|---|
| 1296 | if (CapitalizeFirst == true){ |
|---|
| 1297 | OutString = CapFirst(OutString); |
|---|
| 1298 | } |
|---|
| 1299 | return OutString; |
|---|
| 1300 | } |
|---|
| 1301 | |
|---|
| 1302 | function CheckAnswer(CheckType){ |
|---|
| 1303 | if (Locked == true){return;} |
|---|
| 1304 | if (GuessSequence.length < 1){ |
|---|
| 1305 | if (CheckType == 1){ |
|---|
| 1306 | Penalties++; |
|---|
| 1307 | ShowMessage(NextCorrect + '<br /><br />' + FindSegment(Answers[0][0])); |
|---|
| 1308 | } |
|---|
| 1309 | return; |
|---|
| 1310 | } |
|---|
| 1311 | var i = 0; |
|---|
| 1312 | var j = 0; |
|---|
| 1313 | var k = 0; |
|---|
| 1314 | var WellDone = ''; |
|---|
| 1315 | var WhichCorrect = -1; |
|---|
| 1316 | var TryAgain = ''; |
|---|
| 1317 | var LongestCorrectBit = ''; |
|---|
| 1318 | TempCorrect = new Array(); |
|---|
| 1319 | LongestCorrect = new Array(); |
|---|
| 1320 | var TempHint = ''; |
|---|
| 1321 | var HintToReturn = 1; |
|---|
| 1322 | var OtherAnswers = ''; |
|---|
| 1323 | |
|---|
| 1324 | for (i=0; i<Answers.length; i++){ |
|---|
| 1325 | TempCorrect.length = 0; |
|---|
| 1326 | for (j=0; j<Answers[i].length; j++){ |
|---|
| 1327 | if (Answers[i][j] == GuessSequence[j]){ |
|---|
| 1328 | TempCorrect[j] = GuessSequence[j]; |
|---|
| 1329 | } |
|---|
| 1330 | else{ |
|---|
| 1331 | TempHint = Answers[i][j]; |
|---|
| 1332 | break; |
|---|
| 1333 | } |
|---|
| 1334 | } |
|---|
| 1335 | if ((TempCorrect.length == GuessSequence.length)&&(TempCorrect.length == Answers[i].length)){ |
|---|
| 1336 | WhichCorrect = i; |
|---|
| 1337 | break; |
|---|
| 1338 | } |
|---|
| 1339 | else{ |
|---|
| 1340 | if (TempCorrect.length > LongestCorrect.length){ |
|---|
| 1341 | LongestCorrect.length = 0; |
|---|
| 1342 | for (k=0; k<TempCorrect.length; k++){ |
|---|
| 1343 | LongestCorrect[k] = TempCorrect[k]; |
|---|
| 1344 | } |
|---|
| 1345 | HintToReturn = TempHint; |
|---|
| 1346 | } |
|---|
| 1347 | } |
|---|
| 1348 | } |
|---|
| 1349 | if (WhichCorrect > -1){ |
|---|
| 1350 | for (i=0; i<Answers.length; i++){ |
|---|
| 1351 | if (i!=WhichCorrect){ |
|---|
| 1352 | OtherAnswers += '<br />' + CompileString(Answers[i]); |
|---|
| 1353 | } |
|---|
| 1354 | } |
|---|
| 1355 | WellDone = '<span class="CorrectAnswer">' + CompiledOutput + '</span><br /><br />' + CorrectResponse + '<br />'; |
|---|
| 1356 | |
|---|
| 1357 | //Do score calculation here |
|---|
| 1358 | Score = Math.floor(((Segments.length-Penalties) * 100)/Segments.length); |
|---|
| 1359 | WellDone += YourScoreIs + ' ' + Score + '%.<br />'; |
|---|
| 1360 | |
|---|
| 1361 | |
|---|
| 1362 | |
|---|
| 1363 | ShowMessage(WellDone); |
|---|
| 1364 | WriteToInstructions(YourScoreIs + ' ' + Score + '%.'); |
|---|
| 1365 | |
|---|
| 1366 | |
|---|
| 1367 | |
|---|
| 1368 | Finished = true; |
|---|
| 1369 | setTimeout('Finish()', SubmissionTimeout); |
|---|
| 1370 | return; |
|---|
| 1371 | } |
|---|
| 1372 | |
|---|
| 1373 | else{ |
|---|
| 1374 | TryAgain = '<span class="Guess">' + CompileString(GuessSequence) + '</span><br /><br />'; |
|---|
| 1375 | Penalties++; |
|---|
| 1376 | |
|---|
| 1377 | if ((CheckType == 0)||(LongestCorrect.length==0)){ |
|---|
| 1378 | TryAgain += IncorrectResponse + '<br />'; |
|---|
| 1379 | } |
|---|
| 1380 | |
|---|
| 1381 | if (LongestCorrect.length > 0){ |
|---|
| 1382 | LongestCorrectBit = CompileString(LongestCorrect); |
|---|
| 1383 | GuessSequence.length = LongestCorrect.length; |
|---|
| 1384 | TryAgain += '<br />' + ThisMuchCorrect + '<br /><span class="Guess">' + LongestCorrectBit + '</span><br />'; |
|---|
| 1385 | } |
|---|
| 1386 | |
|---|
| 1387 | if (CheckType == 1){ |
|---|
| 1388 | TryAgain += '<br />' + NextCorrect + '<br />' + FindSegment(HintToReturn); |
|---|
| 1389 | } |
|---|
| 1390 | |
|---|
| 1391 | ShowMessage(TryAgain); |
|---|
| 1392 | } |
|---|
| 1393 | |
|---|
| 1394 | } |
|---|
| 1395 | |
|---|
| 1396 | |
|---|
| 1397 | var Segments = new Array(); |
|---|
| 1398 | Segments[0] = new Array(); |
|---|
| 1399 | Segments[0][0] = '\u0061'; |
|---|
| 1400 | Segments[0][1] = 6; |
|---|
| 1401 | Segments[0][2] = 0; |
|---|
| 1402 | Segments[1] = new Array(); |
|---|
| 1403 | Segments[1][0] = '\u0077'; |
|---|
| 1404 | Segments[1][1] = 5; |
|---|
| 1405 | Segments[1][2] = 0; |
|---|
| 1406 | Segments[2] = new Array(); |
|---|
| 1407 | Segments[2][0] = '\u0065'; |
|---|
| 1408 | Segments[2][1] = 8; |
|---|
| 1409 | Segments[2][2] = 0; |
|---|
| 1410 | Segments[3] = new Array(); |
|---|
| 1411 | Segments[3][0] = '\u0072'; |
|---|
| 1412 | Segments[3][1] = 7; |
|---|
| 1413 | Segments[3][2] = 0; |
|---|
| 1414 | Segments[4] = new Array(); |
|---|
| 1415 | Segments[4][0] = '\u006F'; |
|---|
| 1416 | Segments[4][1] = 2; |
|---|
| 1417 | Segments[4][2] = 0; |
|---|
| 1418 | Segments[5] = new Array(); |
|---|
| 1419 | Segments[5][0] = '\u0073'; |
|---|
| 1420 | Segments[5][1] = 1; |
|---|
| 1421 | Segments[5][2] = 0; |
|---|
| 1422 | Segments[6] = new Array(); |
|---|
| 1423 | Segments[6][0] = '\u0074'; |
|---|
| 1424 | Segments[6][1] = 4; |
|---|
| 1425 | Segments[6][2] = 0; |
|---|
| 1426 | Segments[7] = new Array(); |
|---|
| 1427 | Segments[7][0] = '\u0066'; |
|---|
| 1428 | Segments[7][1] = 3; |
|---|
| 1429 | Segments[7][2] = 0; |
|---|
| 1430 | |
|---|
| 1431 | |
|---|
| 1432 | var GuessSequence = new Array(); |
|---|
| 1433 | |
|---|
| 1434 | var Answers = new Array(); |
|---|
| 1435 | Answers[0] = new Array(1,2,3,4,5,6,7,8); |
|---|
| 1436 | |
|---|
| 1437 | |
|---|
| 1438 | function doDrag(e) { |
|---|
| 1439 | if (CurrDrag == -1) {return}; |
|---|
| 1440 | if (C.ie){var Ev = window.event}else{var Ev = e} |
|---|
| 1441 | var difX = Ev.clientX-window.lastX; |
|---|
| 1442 | var difY = Ev.clientY-window.lastY; |
|---|
| 1443 | var newX = Cds[CurrDrag].GetL()+difX; |
|---|
| 1444 | var newY = Cds[CurrDrag].GetT()+difY; |
|---|
| 1445 | Cds[CurrDrag].SetL(newX); |
|---|
| 1446 | Cds[CurrDrag].SetT(newY); |
|---|
| 1447 | window.lastX = Ev.clientX; |
|---|
| 1448 | window.lastY = Ev.clientY; |
|---|
| 1449 | return false; |
|---|
| 1450 | } |
|---|
| 1451 | |
|---|
| 1452 | function beginDrag(e, DragNum) { |
|---|
| 1453 | CurrDrag = DragNum; |
|---|
| 1454 | if (C.ie){ |
|---|
| 1455 | var Ev = window.event; |
|---|
| 1456 | document.onmousemove=doDrag; |
|---|
| 1457 | document.onmouseup=endDrag; |
|---|
| 1458 | } |
|---|
| 1459 | else{ |
|---|
| 1460 | var Ev = e; |
|---|
| 1461 | window.onmousemove=doDrag; |
|---|
| 1462 | window.onmouseup=endDrag; |
|---|
| 1463 | } |
|---|
| 1464 | Cds[CurrDrag].SwapColours(); |
|---|
| 1465 | topZ++; |
|---|
| 1466 | Cds[CurrDrag].css.zIndex = topZ; |
|---|
| 1467 | window.lastX=Ev.clientX; |
|---|
| 1468 | window.lastY=Ev.clientY; |
|---|
| 1469 | return true; |
|---|
| 1470 | } |
|---|
| 1471 | |
|---|
| 1472 | function endDrag(e) { |
|---|
| 1473 | if (CurrDrag == -1) {return}; |
|---|
| 1474 | Cds[CurrDrag].SwapColours(); |
|---|
| 1475 | if (C.ie){document.onmousemove=null}else{window.onmousemove=null;} |
|---|
| 1476 | onEndDrag(); |
|---|
| 1477 | CurrDrag = -1; |
|---|
| 1478 | return true; |
|---|
| 1479 | } |
|---|
| 1480 | |
|---|
| 1481 | function onEndDrag(){ |
|---|
| 1482 | //Snap to lines |
|---|
| 1483 | var i = 0; |
|---|
| 1484 | var SnapLine = Cds[CurrDrag].GetT(); |
|---|
| 1485 | var BiggestOverlap = -1; |
|---|
| 1486 | var OverlapRect = 0; |
|---|
| 1487 | for (i=0; i<L.length; i++){ |
|---|
| 1488 | if (Cds[CurrDrag].Overlap(L[i]) > OverlapRect){ |
|---|
| 1489 | OverlapRect = Cds[CurrDrag].Overlap(L[i]); |
|---|
| 1490 | BiggestOverlap = i; |
|---|
| 1491 | } |
|---|
| 1492 | } |
|---|
| 1493 | if (BiggestOverlap > -1){ |
|---|
| 1494 | SnapLine = L[BiggestOverlap].GetB() - (Cds[CurrDrag].GetH() + 2); |
|---|
| 1495 | Cds[CurrDrag].SetT(SnapLine); |
|---|
| 1496 | CheckOver(-1); |
|---|
| 1497 | } |
|---|
| 1498 | if (CapitalizeFirst==true){ |
|---|
| 1499 | setTimeout('DoCapitalization()', 50); |
|---|
| 1500 | } |
|---|
| 1501 | } |
|---|
| 1502 | |
|---|
| 1503 | function DoCapitalization(){ |
|---|
| 1504 | //Capitalize first segment if necessary |
|---|
| 1505 | var FD = GetGuessSequence(); |
|---|
| 1506 | if ((FD == -1)&&(FirstDiv > -1)){ |
|---|
| 1507 | Cds[FirstDiv].elm.innerHTML = Segments[FirstDiv][0]; |
|---|
| 1508 | } |
|---|
| 1509 | if (((FD != FirstDiv)&&(CapitalizeFirst == true))&&(FD > -1)){ |
|---|
| 1510 | if (FirstDiv > -1){ |
|---|
| 1511 | Cds[FirstDiv].elm.innerHTML = Segments[FirstDiv][0]; |
|---|
| 1512 | } |
|---|
| 1513 | } |
|---|
| 1514 | if ((FD > -1)&&(CapitalizeFirst == true)){ |
|---|
| 1515 | var Temp = CapFirst(Segments[FD][0]); |
|---|
| 1516 | Cds[FD].elm.innerHTML = Temp; |
|---|
| 1517 | FirstDiv = FD; |
|---|
| 1518 | } |
|---|
| 1519 | } |
|---|
| 1520 | |
|---|
| 1521 | function CheckOver(NoMove){ |
|---|
| 1522 | //This recursive function spreads out the Cards on a line if two of them are overlapping; |
|---|
| 1523 | //if the spread operation moves one beyond the end of a line, it wraps it to the next line. |
|---|
| 1524 | for (var i=0; i<Cds.length; i++){ |
|---|
| 1525 | for (var j=0; j<Cds.length; j++){ |
|---|
| 1526 | if (i!=j){ |
|---|
| 1527 | if (Cds[i].Overlap(Cds[j]) > 0){ |
|---|
| 1528 | if ((i==NoMove)||(Cds[i].GetL() < Cds[j].GetL())){ |
|---|
| 1529 | Cds[j].DockToR(Cds[i]); |
|---|
| 1530 | if (Cds[j].GetR() > (LeftColPos + DivWidth)){ |
|---|
| 1531 | Cds[j].SetL(LeftColPos); |
|---|
| 1532 | Cds[j].SetT(Cds[j].GetT() + DropHeight); |
|---|
| 1533 | } |
|---|
| 1534 | CheckOver(j); |
|---|
| 1535 | } |
|---|
| 1536 | else{ |
|---|
| 1537 | Cds[i].DockToR(Cds[j]); |
|---|
| 1538 | if (Cds[i].GetR() > (LeftColPos + DivWidth)){ |
|---|
| 1539 | Cds[i].SetL(LeftColPos); |
|---|
| 1540 | Cds[i].SetT(Cds[i].GetT() + DropHeight); |
|---|
| 1541 | } |
|---|
| 1542 | CheckOver(i); |
|---|
| 1543 | } |
|---|
| 1544 | } |
|---|
| 1545 | } |
|---|
| 1546 | } |
|---|
| 1547 | } |
|---|
| 1548 | } |
|---|
| 1549 | |
|---|
| 1550 | function StartUp(){ |
|---|
| 1551 | |
|---|
| 1552 | |
|---|
| 1553 | |
|---|
| 1554 | |
|---|
| 1555 | |
|---|
| 1556 | Segments = Shuffle(Segments); |
|---|
| 1557 | |
|---|
| 1558 | //Calculate page dimensions and positions |
|---|
| 1559 | pg = new PageDim(); |
|---|
| 1560 | DivWidth = Math.floor((pg.W*4)/5); |
|---|
| 1561 | LeftColPos = Math.floor(pg.W/10); |
|---|
| 1562 | DragTop = parseInt(document.getElementById('CheckButtonDiv').offsetHeight) + parseInt(document.getElementById('CheckButtonDiv').offsetTop) + 10; |
|---|
| 1563 | |
|---|
| 1564 | var CurrTop = DragTop + 10; |
|---|
| 1565 | |
|---|
| 1566 | //Position the drop divs |
|---|
| 1567 | for (var i=0; i<DropTotal; i++){ |
|---|
| 1568 | L[i] = new Card('Drop' + i, 0); |
|---|
| 1569 | L[i].SetT(CurrTop) |
|---|
| 1570 | L[i].tag = CurrTop-5; |
|---|
| 1571 | L[i].SetL(LeftColPos); |
|---|
| 1572 | L[i].css.backgroundColor = '#FFFFFF'; |
|---|
| 1573 | CurrTop += L[i].GetH(); |
|---|
| 1574 | topZ++; |
|---|
| 1575 | L[i].css.zIndex = topZ; |
|---|
| 1576 | } |
|---|
| 1577 | DropHeight = L[0].GetH(); |
|---|
| 1578 | |
|---|
| 1579 | CurrTop = DragTop; |
|---|
| 1580 | var TempInt = 0; |
|---|
| 1581 | var DropHome = 0; |
|---|
| 1582 | |
|---|
| 1583 | for (i=0; i<Segments.length; i++){ |
|---|
| 1584 | //Create a new pointer in the C array to ref the card div |
|---|
| 1585 | Cds[i] = new Card('D'+i, 0); |
|---|
| 1586 | Cds[i].elm.innerHTML = Segments[i][0]; |
|---|
| 1587 | Cds[i].SetT(CurrTop); |
|---|
| 1588 | Cds[i].SetL(LeftColPos); |
|---|
| 1589 | Cds[i].css.cursor = 'move'; |
|---|
| 1590 | TempInt = Cds[i].GetH(); |
|---|
| 1591 | CurrTop = CurrTop + TempInt + 5; |
|---|
| 1592 | Cds[i].css.backgroundColor = '#EECCEE'; |
|---|
| 1593 | Cds[i].css.color = '#330033'; |
|---|
| 1594 | topZ++; |
|---|
| 1595 | Cds[i].css.zIndex = topZ; |
|---|
| 1596 | Cds[i].tag = Segments[i][1]; |
|---|
| 1597 | Cds[i].index = i; |
|---|
| 1598 | } |
|---|
| 1599 | //Place them at the bottom of the page |
|---|
| 1600 | SetInitialPositions(); |
|---|
| 1601 | |
|---|
| 1602 | |
|---|
| 1603 | } |
|---|
| 1604 | |
|---|
| 1605 | function SetInitialPositions(){ |
|---|
| 1606 | //Places all the divs at the bottom of the page in centred rows |
|---|
| 1607 | //First, get the vertical position of the first row |
|---|
| 1608 | var RTop = L[L.length-1].GetB() + 10; |
|---|
| 1609 | |
|---|
| 1610 | //Create an array to hold the numbers of Cards for each row |
|---|
| 1611 | CRows = new Array(); |
|---|
| 1612 | CRows[0] = new Array(); |
|---|
| 1613 | Widths = new Array(); |
|---|
| 1614 | var i=0; |
|---|
| 1615 | var r=0; |
|---|
| 1616 | var RowWidth=0; |
|---|
| 1617 | //Sort the Cards into rows, storing their numbers in the array |
|---|
| 1618 | |
|---|
| 1619 | while (i<Cds.length){ |
|---|
| 1620 | //if it fits on this row, add it |
|---|
| 1621 | if ((RowWidth + Cds[i].GetW() + 5) < DivWidth){ |
|---|
| 1622 | CRows[r][CRows[r].length] = i; |
|---|
| 1623 | RowWidth += Cds[i].GetW() + 5; |
|---|
| 1624 | //Store the width in the Widths array for later |
|---|
| 1625 | Widths[r] = RowWidth; |
|---|
| 1626 | } |
|---|
| 1627 | //if not, increment the row number, and add it to the next row |
|---|
| 1628 | else{ |
|---|
| 1629 | r++; |
|---|
| 1630 | CRows[r] = new Array(); |
|---|
| 1631 | CRows[r][CRows[r].length] = i; |
|---|
| 1632 | RowWidth = Cds[i].GetW() + 5; |
|---|
| 1633 | //Store the width in the Widths array for later |
|---|
| 1634 | Widths[r] = RowWidth; |
|---|
| 1635 | } |
|---|
| 1636 | //move to the next Card |
|---|
| 1637 | i++; |
|---|
| 1638 | } |
|---|
| 1639 | //Now we have the numbers in rows, set out each row |
|---|
| 1640 | r=0; |
|---|
| 1641 | var Indent=0; |
|---|
| 1642 | for (r=0; r<CRows.length; r++){ |
|---|
| 1643 | //Get the required indent for this row |
|---|
| 1644 | Indent = Math.floor((DivWidth-Widths[r])/2); |
|---|
| 1645 | //Set the first card in position |
|---|
| 1646 | Cds[CRows[r][0]].SetL(Indent + LeftColPos); |
|---|
| 1647 | Cds[CRows[r][0]].SetT(RTop); |
|---|
| 1648 | Cds[CRows[r][0]].SetHome(); |
|---|
| 1649 | for (i=1; i<CRows[r].length; i++){ |
|---|
| 1650 | Cds[CRows[r][i]].DockToR(Cds[CRows[r][i-1]]); |
|---|
| 1651 | Cds[CRows[r][i]].SetHome(); |
|---|
| 1652 | } |
|---|
| 1653 | //Increment the row height |
|---|
| 1654 | RTop += Cds[0].GetH() + 5; |
|---|
| 1655 | } |
|---|
| 1656 | } |
|---|
| 1657 | |
|---|
| 1658 | function Restart(){ |
|---|
| 1659 | for (var i=0; i<Cds.length; i++){ |
|---|
| 1660 | Cds[i].GoHome(); |
|---|
| 1661 | Cds[i].elm.innerHTML = Segments[i][0]; |
|---|
| 1662 | } |
|---|
| 1663 | } |
|---|
| 1664 | |
|---|
| 1665 | function TimerStartUp(){ |
|---|
| 1666 | setTimeout('StartUp()', 300); |
|---|
| 1667 | } |
|---|
| 1668 | |
|---|
| 1669 | |
|---|
| 1670 | |
|---|
| 1671 | |
|---|
| 1672 | |
|---|
| 1673 | |
|---|
| 1674 | |
|---|
| 1675 | |
|---|
| 1676 | //--> |
|---|
| 1677 | |
|---|
| 1678 | //]]> |
|---|
| 1679 | |
|---|
| 1680 | </script> |
|---|
| 1681 | |
|---|
| 1682 | </head> |
|---|
| 1683 | |
|---|
| 1684 | <body onload="TimerStartUp()" id="TheBody"> |
|---|
| 1685 | <!-- BeginTopNavButtons --> |
|---|
| 1686 | |
|---|
| 1687 | |
|---|
| 1688 | <div class="NavButtonBar" id="TopNavBar"> |
|---|
| 1689 | |
|---|
| 1690 | |
|---|
| 1691 | |
|---|
| 1692 | |
|---|
| 1693 | |
|---|
| 1694 | |
|---|
| 1695 | <button class="NavButton" onfocus="NavBtnOver(this)" onblur="NavBtnOut(this)" onmouseover="NavBtnOver(this)" onmouseout="NavBtnOut(this)" onmousedown="NavBtnDown(this)" onmouseup="NavBtnOut(this)" onclick="location='jmatch1.htm'; return false;">Siguiente ejemplo</button> |
|---|
| 1696 | |
|---|
| 1697 | |
|---|
| 1698 | </div> |
|---|
| 1699 | |
|---|
| 1700 | |
|---|
| 1701 | |
|---|
| 1702 | <!-- EndTopNavButtons --> |
|---|
| 1703 | |
|---|
| 1704 | <div class="Titles"> |
|---|
| 1705 | <h2 class="ExerciseTitle">Ejercicio de ordenar la letras de una palabra elaborado con JMix</h2> |
|---|
| 1706 | <h3 class="ExerciseSubtitle">Ejercicio de ordenar las letras de una palabra</h3> |
|---|
| 1707 | |
|---|
| 1708 | |
|---|
| 1709 | </div> |
|---|
| 1710 | |
|---|
| 1711 | <div id="InstructionsDiv" class="StdDiv"> |
|---|
| 1712 | <p id="Instructions">Ponga las letras en el orden correcto para formar una palabra. Cuando considere que la palabra es correcta, pulse en "Comprobar" para revisar su respuesta. Si lo considera necesario, pulse en el botón "Pista" para ver cuál es la siguiente letra correcta.</p> |
|---|
| 1713 | </div> |
|---|
| 1714 | |
|---|
| 1715 | <div class="StdDiv" id="CheckButtonDiv"> |
|---|
| 1716 | <button id="CheckButton1" class="FuncButton" onmouseover="FuncBtnOver(this)" onfocus="FuncBtnOver(this)" onmouseout="FuncBtnOut(this)" onblur="FuncBtnOut(this)" onmousedown="FuncBtnDown(this)" onmouseup="FuncBtnOut(this)" onclick="CheckResults(0)"> Comprobar </button> |
|---|
| 1717 | |
|---|
| 1718 | |
|---|
| 1719 | <button class="FuncButton" onmouseover="FuncBtnOver(this)" onfocus="FuncBtnOver(this)" onmouseout="FuncBtnOut(this)" onblur="FuncBtnOut(this)" onmousedown="FuncBtnDown(this)" onmouseup="FuncBtnOut(this)" onclick="Restart()"> Volver a empezar </button> |
|---|
| 1720 | |
|---|
| 1721 | |
|---|
| 1722 | |
|---|
| 1723 | <button class="FuncButton" onmouseover="FuncBtnOver(this)" onfocus="FuncBtnOver(this)" onmouseout="FuncBtnOut(this)" onblur="FuncBtnOut(this)" onmousedown="FuncBtnDown(this)" onmouseup="FuncBtnOut(this)" onclick="CheckResults(1)"> Pista </button> |
|---|
| 1724 | |
|---|
| 1725 | </div> |
|---|
| 1726 | |
|---|
| 1727 | <script type="text/javascript"> |
|---|
| 1728 | |
|---|
| 1729 | //<![CDATA[ |
|---|
| 1730 | |
|---|
| 1731 | <!-- |
|---|
| 1732 | |
|---|
| 1733 | |
|---|
| 1734 | for (var i=0; i<DropTotal; i++){ |
|---|
| 1735 | document.write('<div id="Drop' + i + '" class="DropLine" align="center"> <br /> </div>'); |
|---|
| 1736 | } |
|---|
| 1737 | |
|---|
| 1738 | for (var i=0; i<Segments.length; i++){ |
|---|
| 1739 | document.write('<div id="D' + i + '" class="CardStyle" onmousedown="beginDrag(event, ' + i + ')"></div>'); |
|---|
| 1740 | } |
|---|
| 1741 | |
|---|
| 1742 | //--> |
|---|
| 1743 | |
|---|
| 1744 | //]]> |
|---|
| 1745 | </script> |
|---|
| 1746 | |
|---|
| 1747 | <div class="Feedback" id="FeedbackDiv"> |
|---|
| 1748 | <div class="FeedbackText" id="FeedbackContent"></div> |
|---|
| 1749 | <button id="FeedbackOKButton" class="FuncButton" onfocus="FuncBtnOver(this)" onblur="FuncBtnOut(this)" onmouseover="FuncBtnOver(this)" onmouseout="FuncBtnOut(this)" onmousedown="FuncBtnDown(this)" onmouseup="FuncBtnOut(this)" onclick="HideFeedback(); return false;"> OK </button> |
|---|
| 1750 | </div> |
|---|
| 1751 | |
|---|
| 1752 | <!-- BeginBottomNavButtons --> |
|---|
| 1753 | |
|---|
| 1754 | <!-- EndBottomNavButtons --> |
|---|
| 1755 | |
|---|
| 1756 | <!-- BeginSubmissionForm --> |
|---|
| 1757 | |
|---|
| 1758 | <!-- EndSubmissionForm --> |
|---|
| 1759 | |
|---|
| 1760 | </body> |
|---|
| 1761 | </html> |
|---|