File size: 51,871 Bytes
dc3e5ed ee5ccd8 dc3e5ed ee5ccd8 dc3e5ed ee5ccd8 dc3e5ed ee5ccd8 dc3e5ed ee5ccd8 dc3e5ed ee5ccd8 dc3e5ed ee5ccd8 dc3e5ed ee5ccd8 dc3e5ed 6359b7f ee5ccd8 dc3e5ed ee5ccd8 dc3e5ed ee5ccd8 dc3e5ed ee5ccd8 dc3e5ed 4b647a5 dc3e5ed 4b647a5 dc3e5ed 4b647a5 dc3e5ed cb0c3bf dc3e5ed ee5ccd8 dc3e5ed cb0c3bf dc3e5ed ee5ccd8 4b647a5 cb0c3bf 4b647a5 cb0c3bf 4b647a5 ee5ccd8 4b647a5 dc3e5ed ee5ccd8 dc3e5ed ee5ccd8 dc3e5ed ee5ccd8 dc3e5ed ee5ccd8 cb0c3bf ee5ccd8 dc3e5ed ee5ccd8 dc3e5ed ee5ccd8 dc3e5ed ee5ccd8 dc3e5ed ee5ccd8 dc3e5ed ee5ccd8 dc3e5ed ee5ccd8 dc3e5ed ee5ccd8 dc3e5ed ee5ccd8 dc3e5ed ee5ccd8 dc3e5ed ee5ccd8 dc3e5ed ee5ccd8 dc3e5ed ee5ccd8 dc3e5ed ee5ccd8 dc3e5ed ee5ccd8 dc3e5ed ee5ccd8 dc3e5ed ee5ccd8 dc3e5ed ee5ccd8 dc3e5ed ee5ccd8 dc3e5ed ee5ccd8 dc3e5ed ee5ccd8 dc3e5ed 6359b7f | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 318 319 320 321 322 323 324 325 326 327 328 329 330 331 332 333 334 335 336 337 338 339 340 341 342 343 344 345 346 347 348 349 350 351 352 353 354 355 356 357 358 359 360 361 362 363 364 365 366 367 368 369 370 371 372 373 374 375 376 377 378 379 380 381 382 383 384 385 386 387 388 389 390 391 392 393 394 395 396 397 398 399 400 401 402 403 404 405 406 407 408 409 410 411 412 413 414 415 416 417 418 419 420 421 422 423 424 425 426 427 428 429 430 431 432 433 434 435 436 437 438 439 440 441 442 443 444 445 446 447 448 449 450 451 452 453 454 455 456 457 458 459 460 461 462 463 464 465 466 467 468 469 470 471 472 473 474 475 476 477 478 479 480 481 482 483 484 485 486 487 488 489 490 491 492 493 494 495 496 497 498 499 500 501 502 503 504 505 506 507 508 509 510 511 512 513 514 515 516 517 518 519 520 521 522 523 524 525 526 527 528 529 530 531 532 533 534 535 536 537 538 539 540 541 542 543 544 545 546 547 548 549 550 551 552 553 554 555 556 557 558 559 560 561 562 563 564 565 566 567 568 569 570 571 572 573 574 575 576 577 578 579 580 581 582 583 584 585 586 587 588 589 590 591 592 593 594 595 596 597 598 599 600 601 602 603 604 605 606 607 608 609 610 611 612 613 614 615 616 617 618 619 620 621 622 623 624 625 626 627 628 629 630 631 632 633 634 635 636 637 638 639 640 641 642 643 644 645 646 647 648 649 650 651 652 653 654 655 656 657 658 659 660 661 662 663 664 665 666 667 668 669 670 671 672 673 674 675 676 677 678 679 680 681 682 683 684 685 686 687 688 689 690 691 692 693 694 695 696 697 698 699 700 701 702 703 704 705 706 707 708 709 710 711 712 713 714 715 716 717 718 719 720 721 722 723 724 725 726 727 728 729 730 731 732 733 734 735 736 737 738 739 740 741 742 743 744 745 746 747 748 749 750 751 752 753 754 755 756 757 758 759 760 761 762 763 764 765 766 767 768 769 770 771 772 773 774 775 776 777 778 779 780 781 782 783 784 785 786 787 788 789 790 791 792 793 794 795 796 797 798 799 800 801 802 803 804 805 806 807 808 809 810 811 812 813 814 815 816 817 818 819 820 821 822 823 824 825 826 827 828 829 830 831 832 833 834 835 836 837 838 839 840 841 842 843 844 845 846 847 848 849 850 851 852 853 854 855 856 857 858 859 860 861 862 863 864 865 866 867 868 869 870 871 872 873 874 875 876 877 878 879 880 881 882 883 884 885 886 887 888 889 890 891 892 893 894 895 896 897 898 899 900 901 902 903 904 905 906 907 908 909 910 911 912 913 914 915 916 917 918 919 920 921 922 923 924 925 926 927 928 929 930 931 932 933 934 935 936 937 938 939 940 941 942 943 944 945 946 947 948 949 950 951 952 953 954 955 956 957 958 959 960 961 962 963 964 965 966 967 968 969 970 971 972 973 974 975 976 977 978 979 980 981 982 983 984 985 986 987 988 989 990 991 992 993 994 995 996 997 998 999 1000 1001 1002 1003 1004 1005 1006 1007 1008 1009 1010 1011 1012 1013 1014 1015 1016 1017 1018 | <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Digital Preservation Glossary - Card Match Game</title>
<style>
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
background: #ffffff;
min-height: 100vh;
padding: 20px;
color: #333;
}
.container {
max-width: 1200px;
margin: 0 auto;
}
header {
text-align: center;
margin-bottom: 15px;
}
h1 {
font-size: 2rem;
margin-bottom: 8px;
color: #002147;
}
.subtitle {
color: #666;
font-size: 1rem;
}
/* ── Level Progress ── */
.level-progress {
display: flex;
justify-content: center;
align-items: center;
margin: 20px 0 14px;
}
.level-label {
padding: 7px 22px;
border-radius: 20px;
font-size: 0.85rem;
font-weight: 600;
background: #e8e8e8;
color: #888;
transition: background 0.4s ease, color 0.4s ease;
white-space: nowrap;
position: relative;
z-index: 1;
}
.level-label.completed {
background: #28a745;
color: #fff;
}
.level-label.active {
background: #002147;
color: #fff;
}
.level-connector {
width: 36px;
height: 4px;
background: #e0e0e0;
margin: 0 -2px;
transition: background 0.4s ease;
}
.level-connector.completed {
background: #28a745;
}
/* ── Stats ── */
.stats {
display: flex;
justify-content: center;
gap: 30px;
margin: 12px 0 18px;
flex-wrap: wrap;
}
.stat {
background: #f5f5f5;
padding: 15px 25px;
border-radius: 10px;
text-align: center;
border: 1px solid #e0e0e0;
}
.stat-value {
font-size: 1.8rem;
font-weight: bold;
color: #002147;
}
.stat-value.warning {
color: #dc3545;
}
.stat-label {
font-size: 0.85rem;
color: #666;
text-transform: uppercase;
letter-spacing: 1px;
}
/* ── Controls ── */
.controls {
display: flex;
justify-content: center;
gap: 15px;
margin-bottom: 25px;
flex-wrap: wrap;
}
button {
background: #002147;
color: white;
border: none;
padding: 12px 25px;
border-radius: 8px;
cursor: pointer;
font-size: 1rem;
font-weight: 600;
transition: all 0.3s ease;
display: flex;
align-items: center;
gap: 8px;
}
button:hover {
background: #003366;
transform: translateY(-2px);
}
button.secondary {
background: #f5f5f5;
color: #002147;
border: 2px solid #002147;
}
button.secondary:hover {
background: #e8e8e8;
}
.btn-icon {
font-size: 1.2rem;
}
/* ── Instructions ── */
.instructions {
background: #f8f9fa;
padding: 20px;
border-radius: 10px;
margin-bottom: 25px;
text-align: center;
border: 1px solid #e0e0e0;
}
.instructions h2 {
color: #002147;
margin-bottom: 10px;
font-size: 1.2rem;
}
.instructions p {
color: #555;
line-height: 1.6;
}
.term-count {
background: #e8f4f8;
color: #002147;
padding: 8px 16px;
border-radius: 20px;
font-size: 0.9rem;
display: inline-block;
margin-top: 10px;
}
/* ── Messages ── */
.message {
text-align: center;
padding: 25px 20px;
margin: 15px 0;
border-radius: 10px;
font-size: 1.3rem;
display: none;
}
.message.show {
display: block;
}
.message.success {
background: rgba(40, 167, 69, 0.1);
border: 2px solid #28a745;
color: #28a745;
}
.message.failure {
background: rgba(220, 53, 69, 0.1);
border: 2px solid #dc3545;
color: #dc3545;
}
.message .msg-subtitle {
font-size: 0.95rem;
margin-top: 8px;
color: #555;
}
/* Keep buttons inside messages looking correct despite inherited text colour */
.message.success button,
.message.failure button {
color: white;
background: #002147;
margin-top: 15px;
font-size: 1rem;
}
.message.success button:hover,
.message.failure button:hover {
background: #003366;
}
/* ── Game Board ── */
.game-area {
display: flex;
flex-direction: column;
gap: 30px;
margin-bottom: 40px;
overflow: visible;
}
.section {
width: 100%;
overflow: visible;
}
.terms-board {
padding: 10px 0;
}
.section-header {
color: #002147;
font-size: 1.3rem;
font-weight: 600;
margin-bottom: 15px;
padding-bottom: 10px;
border-bottom: 2px solid #002147;
display: flex;
align-items: center;
gap: 10px;
}
.section-header .icon {
font-size: 1.4rem;
}
.game-board {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 12px;
overflow: visible;
}
.definitions-board {
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
padding: 20px 0 150px 0;
}
/* ── Cards ── */
.card {
height: 80px;
perspective: 1000px;
cursor: pointer;
}
.definitions-board .card {
height: 110px;
}
.card-inner {
position: relative;
width: 100%;
height: 100%;
transition: transform 0.6s;
transform-style: preserve-3d;
}
.card.flipped .card-inner {
transform: rotateY(180deg);
}
.card-front, .card-back {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
padding: 15px;
text-align: center;
}
.card-front {
background: #002147;
border: 2px solid #001a38;
}
.card-front::before {
content: "?";
font-size: 2rem;
color: white;
opacity: 0.4;
}
.card-back {
background: #002147;
transform: rotateY(180deg);
border: 2px solid #001a38;
color: white;
overflow: hidden;
}
.card-back .content {
color: white;
}
.card-back.term .content {
font-size: 1.2rem;
font-weight: bold;
}
.card-back.definition {
font-size: 0.8rem;
line-height: 1.4;
}
.card.matched .card-inner {
transform: rotateY(180deg);
}
.card.matched .card-back {
background: #28a745;
border-color: #1e7e34;
}
.card.selected .card-back {
border-color: #ffc107;
border-width: 3px;
box-shadow: 0 0 15px rgba(255, 193, 7, 0.5);
}
/* Lift selected definition cards */
.definitions-board .card.selected {
z-index: 100;
position: relative;
}
.definitions-board .card.selected .card-inner {
transform: rotateY(180deg);
transition: transform 0.3s ease;
}
.definitions-board .card.selected .card-back {
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3), 0 0 20px rgba(255, 193, 7, 0.6);
font-size: 1.05rem;
width: 340px;
height: auto;
min-height: 110px;
position: absolute;
top: 0;
left: 0;
transform: rotateY(180deg);
overflow: visible;
padding: 20px;
line-height: 1.5;
}
/* Lift selected term cards */
.terms-board .card.selected {
z-index: 100;
position: relative;
}
.terms-board .card.selected .card-inner {
transform: rotateY(180deg) scale(1.2);
transition: transform 0.3s ease;
}
.terms-board .card.selected .card-back {
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.25), 0 0 15px rgba(255, 193, 7, 0.5);
}
.card.wrong .card-back {
border-color: #dc3545;
background: #dc3545;
}
.card.removing {
animation: fadeOut 0.5s ease forwards;
}
@keyframes fadeOut {
0% { opacity: 1; transform: scale(1); }
100% { opacity: 0; transform: scale(0.8); }
}
.card.removed {
visibility: hidden;
pointer-events: none;
}
/* ── Attribution ── */
.attribution {
background: #f8f9fa;
padding: 20px;
border-radius: 10px;
margin-top: 40px;
font-size: 0.85rem;
line-height: 1.6;
color: #666;
border: 1px solid #e0e0e0;
}
.attribution a {
color: #002147;
text-decoration: none;
font-weight: 500;
}
.attribution a:hover {
text-decoration: underline;
}
/* ── Responsive ── */
@media (max-width: 600px) {
h1 { font-size: 1.5rem; }
.game-board {
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}
.definitions-board {
grid-template-columns: 1fr;
}
.card-back.definition { font-size: 0.75rem; }
.definitions-board .card.selected .card-back {
width: 100%;
min-width: unset;
font-size: 0.95rem;
}
.level-label {
padding: 6px 14px;
font-size: 0.78rem;
}
.level-connector { width: 20px; }
}
</style>
</head>
<body>
<div class="container">
<header>
<h1>🗃️ Digital Preservation Glossary</h1>
<p class="subtitle">Match the terms with their definitions</p>
</header>
<!-- Level progress bar -->
<div class="level-progress">
<div class="level-label active" id="level-label-0">Level 1</div>
<div class="level-connector" id="level-conn-0"></div>
<div class="level-label" id="level-label-1">Level 2</div>
<div class="level-connector" id="level-conn-1"></div>
<div class="level-label" id="level-label-2">Level 3</div>
</div>
<!-- Stats -->
<div class="stats">
<div class="stat">
<div class="stat-value" id="matches">0 / 10</div>
<div class="stat-label">✓ Matches</div>
</div>
<div class="stat">
<div class="stat-value" id="attempts">0</div>
<div class="stat-label">Attempts</div>
</div>
<div class="stat">
<div class="stat-value" id="timer">2:30</div>
<div class="stat-label">⏱ Time Left</div>
</div>
</div>
<!-- Controls -->
<div class="controls">
<button onclick="startNewGame()">
<span class="btn-icon">🔄</span> New Game
</button>
<button class="secondary" onclick="shuffleCards()">
<span class="btn-icon">🔀</span> Shuffle
</button>
<button class="secondary" onclick="showHint()">
<span class="btn-icon">💡</span> Hint
</button>
</div>
<!-- Instructions -->
<div class="instructions">
<h2>How to Play</h2>
<p>Complete all <strong>3 levels</strong> to win! Click a <strong>term card</strong>, then its matching <strong>definition</strong> below.
Matched pairs turn <span style="color:#28a745;font-weight:bold">green</span>, then disappear on your next match.
Each level has a tighter time limit — stay sharp!</p>
<div class="term-count">📚 10 terms per level · 3 levels · From 108 terms in the DPC Glossary</div>
</div>
<!-- Messages -->
<div class="message success" id="levelCompleteMessage">
<div id="levelCompleteTitle">🎉 Level 1 Complete!</div>
<div class="msg-subtitle" id="levelCompleteSubtitle"></div>
<button onclick="nextLevel()" id="nextLevelBtn">Next Level →</button>
</div>
<div class="message success" id="winMessage">
🎉 Congratulations! You completed all 3 levels!
<div class="msg-subtitle">You've mastered the Digital Preservation Glossary!</div>
<button onclick="startNewGame()">🔄 Play Again</button>
</div>
<div class="message failure" id="loseMessage">
⏰ Time's up!
<div class="msg-subtitle">Don't give up — try this level again!</div>
<button onclick="retryLevel()">🔄 Retry Level</button>
</div>
<!-- Game board -->
<div class="game-area">
<div class="section terms-section">
<h2 class="section-header">
<span class="icon">📝</span> Terms & Acronyms
</h2>
<div class="game-board terms-board" id="termsBoard"></div>
</div>
<div class="section definitions-section">
<h2 class="section-header">
<span class="icon">📖</span> Definitions
</h2>
<div class="game-board definitions-board" id="definitionsBoard"></div>
</div>
</div>
<!-- Attribution -->
<div class="attribution">
<strong>Source:</strong> Digital Preservation Handbook, 2nd Edition,
<a href="https://www.dpconline.org/handbook" target="_blank">https://www.dpconline.org/handbook</a><br>
Digital Preservation Coalition © 2015 licensed under the
<a href="http://www.nationalarchives.gov.uk/doc/open-government-licence/version/3/" target="_blank">Open Government Licence v3.0</a>.<br><br>
This interactive learning tool was created for educational purposes.
For the most up-to-date glossary, please visit the
<a href="https://www.dpconline.org/handbook/glossary" target="_blank">DPC Handbook Glossary</a>.
</div>
</div>
<script>
// =====================================================================
// GLOSSARY DATA (108 terms – unchanged)
// =====================================================================
const allGlossaryData = [
{ term:"Access", definition:"As defined in the Handbook, access is assumed to mean continued, ongoing usability of a digital resource, retaining all qualities of authenticity, accuracy and functionality deemed to be essential for the purposes the digital material was created and/or acquired for." },
{ term:"ADS", definition:"Archaeology Data Service. A UK based service active in digital preservation." },
{ term:"AIP", definition:"Archival Information Package. An Information Package, consisting of the Content Information and the associated Preservation Description Information (PDI), which is preserved within an OAIS (OAIS term)." },
{ term:"AMIA", definition:"Association of Moving Image Archives, an organisation active in the field of moving image archiving." },
{ term:"ARC", definition:"Container format for websites devised by the Internet Archive, superseded by WARC." },
{ term:"ASCII", definition:"American Standard Code for Information Interchange, standard for electronic text." },
{ term:"Authentication", definition:"A mechanism which attempts to establish the authenticity of digital materials at a particular point in time. For example, digital signatures." },
{ term:"Authenticity", definition:"The digital material is what it purports to be. In the case of electronic records, it refers to the trustworthiness of the electronic record as a record. In the case of \"born digital\" and digitised materials, it refers to the fact that whatever is being cited is the same as it was when it was first created unless the accompanying metadata indicates any changes." },
{ term:"Bit", definition:"A bit is the basic unit of information in computing. It can have only one of two values commonly represented as either a 0 or 1." },
{ term:"Bit Preservation", definition:"A term used to denote a very basic level of preservation of digital resource as it was submitted (literally preservation of the bits forming a digital resource). It may include maintaining onsite and offsite backup copies, virus checking, fixity-checking, and periodic refreshment to new storage media." },
{ term:"Born-Digital", definition:"Digital materials which are not intended to have an analogue equivalent, either as the originating source or as a result of conversion to analogue form." },
{ term:"BWF", definition:"Broadcast WAV format, the European Broadcasting Union standard for a WAV file, with extra metadata." },
{ term:"Byte (B)", definition:"A unit of digital information that most commonly consists of eight bits. Historically, the byte was the number of bits used to encode a single character of text in a computer." },
{ term:"CCSDS", definition:"Consultative Committee for Space Data Systems, the body responsible for the OAIS Reference Model." },
{ term:"Chain of Custody", definition:"A key concept in forensics whereby the custody and provenance of digital hardware, media and files are safeguarded through, for example, the appointment of evidence custodians." },
{ term:"Checksum", definition:"A unique numerical signature derived from a file. Used to compare copies." },
{ term:"CLIR", definition:"Council on Library and Information Resources. US based organisation active in digital preservation." },
{ term:"CNI", definition:"Coalition for Networked Information. US based organisation active in digital preservation." },
{ term:"Continuing Access", definition:"Refers to the right of a subscriber to an electronic publication and their users to have on-going permanent access to electronic materials which have already been leased and paid for by the subscriber from a publisher." },
{ term:"COPTR", definition:"Community Owned digital Preservation Tool Registry hosted by The Open Preservation Foundation." },
{ term:"Crawl", definition:"The act of browsing the web automatically and methodically to index or download content and other data from the web. The software to do this is often called a web crawler." },
{ term:"Dark Archive", definition:"An archive that cannot be accessed by any current users but may be accessible at future dates subject to the occurrence of specific pre-defined events ('trigger event')." },
{ term:"DCC", definition:"Digital Curation Centre. A UK based organisation active in digital preservation." },
{ term:"DDI", definition:"Data Documentation Initiative. A de facto international metadata standard for describing data from the social, behavioral, and economic sciences." },
{ term:"Designated Community", definition:"An identified group of potential consumers who should be able to understand a particular set of information from an archive. These consumers may consist of multiple communities, are designated by the archive, and may change over time (OAIS term)." },
{ term:"Digital Archiving", definition:"This term is used very differently within sectors. The library and archiving communities often use it interchangeably with digital preservation. Computing professionals tend to use it to mean the process of backup and ongoing maintenance." },
{ term:"Digital Forensics", definition:"The application of scientific technical methods and tools toward the preservation, collection, validation, identification, analysis, interpretation, documentation and presentation of digital information derived after-the-fact from digital sources." },
{ term:"Dim Archive", definition:"Provides bit preservation for the content plus digital preservation planning and actions for long-term perpetual access, and also limited current access." },
{ term:"DigCurV", definition:"Digital Curator Vocational Education Europe. A project funded by the European Commission to establish a curriculum framework for vocational training in digital curation." },
{ term:"Digital Materials", definition:"A broad term encompassing digital surrogates created as a result of converting analogue materials to digital form (digitisation), and \"born digital\" for which there has never been and is never intended to be an analogue equivalent, and digital records." },
{ term:"Digital Preservation", definition:"Refers to the series of managed activities necessary to ensure continued access to digital materials for as long as necessary. It includes all actions required to maintain access beyond the limits of media failure or technological and organisational change." },
{ term:"Short-term preservation", definition:"Access to digital materials either for a defined period of time while use is predicted but which does not extend beyond the foreseeable future and/or until it becomes inaccessible because of changes in technology." },
{ term:"Medium-term preservation", definition:"Continued access to digital materials beyond changes in technology for a defined period of time but not indefinitely." },
{ term:"Long-term preservation", definition:"Continued access to digital materials, or at least to the information contained in them, indefinitely." },
{ term:"Digital Preservation Management Workshop", definition:"An intensive training workshop and online tutorial developed and maintained by Cornell University Library, extended by ICPSR, and now maintained by MIT Libraries." },
{ term:"Digital Publications", definition:"\"Born digital\" objects which have been released for public access and either made available or distributed free of charge or for a fee. They may be networked publications or physical format publications distributed on formats such as optical disks." },
{ term:"Digitisation", definition:"The process of creating digital files by scanning or otherwise converting analogue materials. The resulting digital copy, or digital surrogate, would then be classed as digital material." },
{ term:"DIP", definition:"Dissemination Information Package. An Information Package, derived from one or more Archival Information Packages (AIPs), and sent by Archives to the Consumer in response to a request to the OAIS (OAIS term)." },
{ term:"DLF", definition:"Digital Library Federation. A US based organisation active in digital preservation." },
{ term:"Documentation", definition:"The information provided by a creator and the repository which provides enough information to establish provenance, history and context and to enable its use by others." },
{ term:"DOI", definition:"Digital Object Identifier. A technical and organisational infrastructure for the registration and use of persistent identifiers widely used in digital publications and for research data." },
{ term:"DPC", definition:"Digital Preservation Coalition. A UK and Ireland based organisation active in digital preservation and responsible for the Digital Preservation Handbook." },
{ term:"DPTP", definition:"Digital Preservation Training Programme, an intensive training course run by the University of London Computer Centre." },
{ term:"DRAMBORA", definition:"Digital Repository Audit Methodology Based on Risk Assessment. A set of risk assessment tools developed by the Digital Curation Centre." },
{ term:"DROID", definition:"A file profiling tool developed and distributed by TNA to identify file formats. Based on PRONOM." },
{ term:"Electronic Records", definition:"Records created digitally in the day-to-day business of the organisation and assigned formal status by the organisation. They may include word processing documents, emails, databases, or intranet web pages." },
{ term:"Emulation", definition:"A means of overcoming technological obsolescence of hardware and software by developing techniques for imitating obsolete systems on future generations of computers." },
{ term:"Escrow", definition:"A widespread legal practice of the deposit of content or software source code with a third party. Escrow takes place in a contractual relationship, formalized in an escrow agreement." },
{ term:"FIAF", definition:"International Federation of Film Archives, an association of the world's leading film archives." },
{ term:"FIAT", definition:"International Federation of Television Archives, a professional association for those engaged in the preservation and exploitation of broadcast archives." },
{ term:"File Format", definition:"A standard way that information is encoded for storage in a computer file. It tells the computer how to display, print, process, and save the information. A particular file format is often indicated by a file name extension." },
{ term:"Fixity Check", definition:"A method for ensuring the integrity of a file and verifying it has not been altered or corrupted. It is most often accomplished by computing checksums such as MD5, SHA1 or SHA256 for a file and comparing them to a stored value." },
{ term:"GIF", definition:"Graphic Interchange Format, an image which typically uses lossy compression." },
{ term:"Gigabyte (GB)", definition:"A unit of digital information often used to describe data or data storage size, equates to approximately 1,000 Megabytes (MB)." },
{ term:"GIS", definition:"Geographical Information System, a system that processes mapping and data together." },
{ term:"HTML", definition:"Hypertext Markup Language, a format used to present text and other information on the World Wide Web. Since 1996, versions have been maintained by the World Wide Web Consortium (W3C)." },
{ term:"IASA", definition:"International Association of Sound and Audiovisual Archives, an association for archives that preserve recorded sound and audiovisual documents." },
{ term:"IIPC", definition:"The International Internet Preservation Consortium." },
{ term:"Information Assurance", definition:"An aspect of digital security, specifically directed at ensuring that the quality of the information is demonstrably safeguarded, that it has not been tampered with or accessed inappropriately." },
{ term:"Ingest", definition:"The process of turning a Submission Information Package (SIP) into an Archival Information Package (AIP), i.e. putting data into a digital archive (OAIS term)." },
{ term:"InterPARES project", definition:"International Research on Permanent Authentic Records in Electronic Systems." },
{ term:"ISO", definition:"International Organization for Standardization." },
{ term:"JHove2", definition:"A characterization tool for digital objects. Characterisation is comprised of four elements: identifying the object's format; validating that the object conforms to its format's technical norms; extracting technical metadata; and assessing whether the object should be accepted into a repository." },
{ term:"JPEG", definition:"Joint Photographic Experts Group, a committee that oversees international standards for compression and processing of digital photographs. The majority of JPEG formats are lossy." },
{ term:"JPEG 2000", definition:"A revision of the JPEG format which can use lossless compression." },
{ term:"Kilobyte (KB)", definition:"A unit of digital information often used to describe data or data storage size, equates to approximately 1,000 Bytes." },
{ term:"Life-cycle Management", definition:"The need actively to manage digital resources at each stage of their life-cycle and to recognise the inter-dependencies between each stage, commencing preservation activities as early as practicable." },
{ term:"Lossless Compression", definition:"A mechanism for reducing file sizes that retains all original data." },
{ term:"Lossy Compression", definition:"A mechanism for reducing file sizes that typically discards data." },
{ term:"LOTAR", definition:"LOng Term Archiving and Retrieval - a digital preservation standard for 3D CAD models and product data management information developed by LOTAR International." },
{ term:"Megabyte (MB)", definition:"A unit of digital information often used to describe data or data storage size, equates to approximately 1,000 Kilobytes (KB)." },
{ term:"Metadata", definition:"Information which describes significant aspects of a resource. The emphasis in this Handbook is on what metadata are required to manage and preserve digital materials over time and ensure essential contextual, historical, and technical information are preserved." },
{ term:"METS", definition:"Metadata Encoding and Transmission Standard, a standard for presenting metadata using XML." },
{ term:"Migration", definition:"A means of overcoming technological obsolescence by transferring digital resources from one hardware/software generation to the next. The purpose is to preserve the intellectual content and retain the ability to retrieve, display, and use digital objects." },
{ term:"MIME", definition:"Multipurpose Internet Mail Extensions. A protocol for including non-ASCII information in email messages." },
{ term:"MPEG", definition:"Moving Picture Experts Group. A committee responsible for the development of international standards for compression, decompression, processing, and coded representation of moving pictures and audio." },
{ term:"NCDD", definition:"The Netherlands Coalition for Digital Preservation." },
{ term:"NDSA", definition:"National Digital Stewardship Alliance, a US based organisation active in digital preservation." },
{ term:"NESTOR", definition:"The German competence network for digital preservation." },
{ term:"OAIS", definition:"Open Archival Information System. An Archive consisting of an organization of people and systems that has accepted the responsibility to preserve information and make it available for a Designated Community. Also refers to the reference model standard (ISO 14721)." },
{ term:"OPF", definition:"Open Preservation Foundation, formerly the Open Planets Foundation." },
{ term:"PAIMAS", definition:"Space Data and Information Transfer Systems - Producer-Archive Interface - Methodology Abstract Standard. This ISO 20652:2006 standard covers the first stages of the ingest process defined by OAIS reference model." },
{ term:"PDF", definition:"Portable Document Format, a set of formats and open standards maintained by the International Organization for Standardization for producing and sharing electronic documents, originally developed by Adobe Systems." },
{ term:"PDF/A", definition:"Versions of the PDF standard intended for archival use." },
{ term:"PDI", definition:"Preservation Description Information. The information which is necessary for adequate preservation of the Content Information and which can be categorized as Provenance, Reference, Fixity, Context, and Access Rights Information (OAIS term)." },
{ term:"Petabyte (PB)", definition:"A unit of digital information often used to describe data or data storage size, equates to approximately 1,000 Terabytes (TB)." },
{ term:"PIN", definition:"Pérennisation des Informations Numériques, the French national interest group for digital preservation." },
{ term:"PREMIS", definition:"Preservation Metadata: Implementation Strategies. A de facto standard for digital preservation metadata." },
{ term:"PRONOM", definition:"A database of file formats, software products and other technical components required to support long-term access to electronic records and other digital objects. Used with DROID." },
{ term:"PST", definition:"Personal Storage Table is a file extension for local 'personal stores' written by Microsoft Outlook. PST files contain email messages and calendar entries." },
{ term:"Reformatting", definition:"Copying information content from one storage medium to a different storage medium (media reformatting) or converting from one file format to a different file format (file reformatting)." },
{ term:"Refreshing", definition:"Copying information content from one storage media to the same storage media." },
{ term:"Sandbox Containment", definition:"A secure computing environment for running novel, unattested or experimental code or changes in code, including potentially malicious code. The environment is self-contained with tightly controlled resources." },
{ term:"SGML", definition:"Standard Generalized Markup Language, an ISO standard for how to specify a document markup language or tag set." },
{ term:"Significant properties", definition:"Characteristics of digital and intellectual objects that must be preserved over time in order to ensure the continued accessibility, usability and meaning of the objects." },
{ term:"SIP", definition:"Submission Information Package. An Information Package that is delivered by the Producer to the OAIS for use in the construction or update of one or more Archival Information Packages (AIPs) (OAIS term)." },
{ term:"SMPTE", definition:"Society of Motion Picture and Television Engineers, a professional organisation and technical standards body for television and motion picture." },
{ term:"TDR", definition:"Trusted Digital Repository. A repository with a mission to provide reliable, long-term access to managed digital resources to its designated community, now and into the future." },
{ term:"Terabyte (TB)", definition:"A unit of digital information often used to describe data or data storage size, equates to approximately 1,000 Gigabytes (GB)." },
{ term:"Three-Legged Stool", definition:"A conceptual approach to digital preservation that suggests a fully implemented programme addresses organisational issues, technological concerns, and funding questions, balancing them like a three-legged stool." },
{ term:"TIFF", definition:"Tagged Image File Format, a common format for images typically lossless." },
{ term:"TRAC", definition:"Trusted Repository Audit and Certification, toolkit for auditing a digital repository." },
{ term:"Trigger Event", definition:"Terminology used when specific conditions relating to an electronic publication and its continued delivery are met. If the publication is no longer available from the publisher, a trigger event has occurred, which can set in motion access via an archive." },
{ term:"UKWA", definition:"UK Web Archive." },
{ term:"WARC", definition:"The WARC (Web ARChive) format is a container format for archived websites (ISO 28500:2009). It is a revision of the Internet Archive's ARC File Format." },
{ term:"WAV", definition:"The standard file wrapper for audio; see BWF (Broadcast WAV Format) for the professional variant." },
{ term:"Writeblockers", definition:"Tools that prevent an examination computer system from writing or altering a collection or subject hard drive or other digital media object." },
{ term:"XML", definition:"Extensible Markup Language, a widely used standard (derived from SGML), for representing structured information. It is maintained by the World Wide Web Consortium (W3C)." }
];
// =====================================================================
// CONFIGURATION
// =====================================================================
const TERMS_PER_LEVEL = 10;
const LEVELS = [
{ time: 150 }, // Level 1 – 2:30
{ time: 120 }, // Level 2 – 2:00
{ time: 90 } // Level 3 – 1:30
];
// =====================================================================
// STATE
// =====================================================================
let glossaryData = [];
let termCards = [];
let definitionCards = [];
let selectedTerm = null;
let selectedDefinition = null;
let lastMatchedTerm = null;
let lastMatchedDefinition = null;
let matchedPairs = 0;
let attempts = 0;
let canSelect = true;
let timerInterval = null;
let secondsRemaining = LEVELS[0].time;
let gameOver = false;
let currentLevel = 0;
// =====================================================================
// UTILITIES
// =====================================================================
function shuffle(array) {
const a = [...array];
for (let i = a.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
[a[i], a[j]] = [a[j], a[i]];
}
return a;
}
function selectRandomTerms() {
return shuffle(allGlossaryData).slice(0, TERMS_PER_LEVEL);
}
function formatTime(totalSeconds) {
const m = Math.floor(totalSeconds / 60);
const s = totalSeconds % 60;
return `${m}:${s.toString().padStart(2, '0')}`;
}
// =====================================================================
// UI HELPERS
// =====================================================================
function updateLevelDisplay() {
for (let i = 0; i < LEVELS.length; i++) {
const label = document.getElementById(`level-label-${i}`);
label.className = 'level-label';
if (i < currentLevel) label.classList.add('completed');
else if (i === currentLevel) label.classList.add('active');
// else: stays plain (future level)
if (i < LEVELS.length - 1) {
const conn = document.getElementById(`level-conn-${i}`);
conn.className = 'level-connector';
if (i < currentLevel) conn.classList.add('completed');
}
}
}
function hideAllMessages() {
['levelCompleteMessage', 'winMessage', 'loseMessage'].forEach(id =>
document.getElementById(id).classList.remove('show')
);
}
// =====================================================================
// CARDS
// =====================================================================
function createCards() {
termCards = glossaryData.map((item, i) => ({
id: `term-${i}`, type: 'term', content: item.term, pairId: i
}));
definitionCards = glossaryData.map((item, i) => ({
id: `def-${i}`, type: 'definition', content: item.definition, pairId: i
}));
termCards = shuffle(termCards);
definitionCards = shuffle(definitionCards);
}
function renderBoard() {
const tb = document.getElementById('termsBoard');
const db = document.getElementById('definitionsBoard');
tb.innerHTML = '';
db.innerHTML = '';
termCards.forEach(c => tb.appendChild(createCardElement(c)));
definitionCards.forEach(c => db.appendChild(createCardElement(c)));
}
function createCardElement(card) {
const el = document.createElement('div');
el.className = 'card';
el.dataset.id = card.id;
el.dataset.pairId = card.pairId;
el.dataset.type = card.type;
el.innerHTML = `
<div class="card-inner">
<div class="card-front"></div>
<div class="card-back ${card.type}">
<div class="content">${card.content}</div>
</div>
</div>`;
el.addEventListener('click', () => handleCardClick(el, card));
return el;
}
// =====================================================================
// INTERACTION
// =====================================================================
function handleCardClick(cardEl, card) {
if (!canSelect || gameOver) return;
if (cardEl.classList.contains('matched') || cardEl.classList.contains('removed')) return;
cardEl.classList.add('flipped');
if (card.type === 'term') {
if (selectedTerm && selectedTerm !== cardEl) {
selectedTerm.classList.remove('selected');
if (!selectedDefinition) selectedTerm.classList.remove('flipped');
}
cardEl.classList.add('selected');
selectedTerm = cardEl;
} else {
if (selectedDefinition && selectedDefinition !== cardEl) {
selectedDefinition.classList.remove('selected');
if (!selectedTerm) selectedDefinition.classList.remove('flipped');
}
cardEl.classList.add('selected');
selectedDefinition = cardEl;
}
if (selectedTerm && selectedDefinition) {
attempts++;
document.getElementById('attempts').textContent = attempts;
checkMatch();
}
}
function checkMatch() {
canSelect = false;
if (selectedTerm.dataset.pairId === selectedDefinition.dataset.pairId) {
// ── Correct match ──
// Fade out the previously green pair (if any)
if (lastMatchedTerm && lastMatchedDefinition) {
lastMatchedTerm.classList.add('removing');
lastMatchedDefinition.classList.add('removing');
setTimeout(() => {
lastMatchedTerm.classList.add('removed');
lastMatchedTerm.classList.remove('removing');
lastMatchedDefinition.classList.add('removed');
lastMatchedDefinition.classList.remove('removing');
}, 500);
}
setTimeout(() => {
selectedTerm.classList.add('matched');
selectedTerm.classList.remove('selected');
selectedDefinition.classList.add('matched');
selectedDefinition.classList.remove('selected');
lastMatchedTerm = selectedTerm;
lastMatchedDefinition = selectedDefinition;
matchedPairs++;
document.getElementById('matches').textContent = `${matchedPairs} / ${TERMS_PER_LEVEL}`;
selectedTerm = null;
selectedDefinition = null;
canSelect = true;
// Short pause so the player sees the last green pair before the message
if (matchedPairs === TERMS_PER_LEVEL) {
setTimeout(levelComplete, 700);
}
}, 500);
} else {
// ── Wrong match ──
selectedTerm.classList.add('wrong');
selectedDefinition.classList.add('wrong');
setTimeout(() => {
selectedTerm.classList.remove('wrong');
selectedDefinition.classList.remove('wrong');
setTimeout(() => {
selectedTerm.classList.remove('flipped', 'selected');
selectedDefinition.classList.remove('flipped', 'selected');
selectedTerm = null;
selectedDefinition = null;
canSelect = true;
}, 300);
}, 800);
}
}
// =====================================================================
// LEVEL / GAME FLOW
// =====================================================================
function levelComplete() {
clearInterval(timerInterval);
gameOver = true;
if (currentLevel < LEVELS.length - 1) {
// ── Not the final level – show "level complete" prompt ──
const nextNum = currentLevel + 2; // 1-based display number
const nextTime = LEVELS[currentLevel + 1].time;
document.getElementById('levelCompleteTitle').textContent =
`🎉 Level ${currentLevel + 1} Complete!`;
if (nextNum === LEVELS.length) {
// The upcoming level is the last one
document.getElementById('levelCompleteSubtitle').textContent =
`Ready for the final challenge? You'll have ${formatTime(nextTime)} this time.`;
document.getElementById('nextLevelBtn').textContent = '⚡ Final Level →';
} else {
document.getElementById('levelCompleteSubtitle').textContent =
`Ready for Level ${nextNum}? You'll have ${formatTime(nextTime)} this time.`;
document.getElementById('nextLevelBtn').textContent = `Go to Level ${nextNum} →`;
}
document.getElementById('levelCompleteMessage').classList.add('show');
} else {
// ── All three levels finished – overall win ──
// Mark every level as completed in the progress bar
currentLevel = LEVELS.length;
updateLevelDisplay();
document.getElementById('winMessage').classList.add('show');
}
}
function gameLost() {
clearInterval(timerInterval);
gameOver = true;
canSelect = false;
document.getElementById('loseMessage').classList.add('show');
}
// =====================================================================
// TIMER
// =====================================================================
function updateTimer() {
secondsRemaining--;
if (secondsRemaining <= 0) {
document.getElementById('timer').textContent = '0:00';
gameLost();
return;
}
const timerEl = document.getElementById('timer');
timerEl.textContent = formatTime(secondsRemaining);
// Warning colour in the last 30 seconds
timerEl.classList.toggle('warning', secondsRemaining <= 30);
}
// =====================================================================
// PUBLIC ACTIONS (called from HTML or from level-flow helpers)
// =====================================================================
function startNewGame() {
currentLevel = 0;
initLevel();
}
function nextLevel() {
currentLevel++;
initLevel();
}
function retryLevel() {
initLevel(); // currentLevel stays the same
}
function initLevel() {
// Reset per-level state
selectedTerm = null;
selectedDefinition = null;
lastMatchedTerm = null;
lastMatchedDefinition = null;
matchedPairs = 0;
attempts = 0;
canSelect = true;
gameOver = false;
secondsRemaining = LEVELS[currentLevel].time;
// Pick a fresh random set of terms
glossaryData = selectRandomTerms();
// Refresh UI
hideAllMessages();
updateLevelDisplay();
document.getElementById('matches').textContent = `0 / ${TERMS_PER_LEVEL}`;
document.getElementById('attempts').textContent = '0';
document.getElementById('timer').textContent = formatTime(secondsRemaining);
document.getElementById('timer').classList.remove('warning');
// (Re)start countdown
clearInterval(timerInterval);
timerInterval = setInterval(updateTimer, 1000);
// Build & render cards
createCards();
renderBoard();
}
// =====================================================================
// SHUFFLE (rearranges only unmatched cards)
// =====================================================================
function shuffleCards() {
if (matchedPairs === TERMS_PER_LEVEL || gameOver) return;
// Drop any in-progress selection
if (selectedTerm) {
selectedTerm.classList.remove('flipped', 'selected');
selectedTerm = null;
}
if (selectedDefinition) {
selectedDefinition.classList.remove('flipped', 'selected');
selectedDefinition = null;
}
// Collect cards that are still in play
const unmatchedTerms = termCards.filter(c => {
const el = document.querySelector(`[data-id="${c.id}"]`);
return el && !el.classList.contains('matched') && !el.classList.contains('removed');
});
const unmatchedDefs = definitionCards.filter(c => {
const el = document.querySelector(`[data-id="${c.id}"]`);
return el && !el.classList.contains('matched') && !el.classList.contains('removed');
});
const shuffledTerms = shuffle(unmatchedTerms);
const shuffledDefs = shuffle(unmatchedDefs);
let ti = 0, di = 0;
termCards = termCards.map(c => {
const el = document.querySelector(`[data-id="${c.id}"]`);
if (el && (el.classList.contains('matched') || el.classList.contains('removed'))) return c;
return shuffledTerms[ti++] || c;
});
definitionCards = definitionCards.map(c => {
const el = document.querySelector(`[data-id="${c.id}"]`);
if (el && (el.classList.contains('matched') || el.classList.contains('removed'))) return c;
return shuffledDefs[di++] || c;
});
renderBoard();
}
// =====================================================================
// HINT (briefly reveals the first unmatched pair)
// =====================================================================
function showHint() {
if (matchedPairs === TERMS_PER_LEVEL || !canSelect || gameOver) return;
for (let i = 0; i < TERMS_PER_LEVEL; i++) {
const termEl = document.querySelector(`[data-id="term-${i}"]`);
const defEl = document.querySelector(`[data-id="def-${i}"]`);
if (termEl && !termEl.classList.contains('matched') && !termEl.classList.contains('removed')) {
termEl.classList.add('flipped');
defEl.classList.add('flipped');
setTimeout(() => {
if (!termEl.classList.contains('matched')) termEl.classList.remove('flipped');
if (!defEl.classList.contains('matched')) defEl.classList.remove('flipped');
}, 1500);
break;
}
}
}
// =====================================================================
// BOOT
// =====================================================================
startNewGame();
</script>
</body>
</html> |