1<!DOCTYPE html> 2<html lang="en"> 3<head> 4 <meta charSet="utf-8"/> 5 <meta http-equiv="x-ua-compatible" content="ie=edge"/> 6 <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/> 7 <meta name="generator" content="Gatsby 4.25.7"/> 8 <meta data-react-helmet="true" charSet="utf-8"/> 9 <meta data-react-helmet="true" name="description" content="QPED: Quality-focussed Programming Education"/> 10 <style data-emotion="css-global o6gwfi">html { 11 -webkit-font-smoothing: antialiased; 12 -moz-osx-font-smoothing: grayscale; 13 box-sizing: border-box; 14 -webkit-text-size-adjust: 100%; 15 } 16 17 *, *::before, *::after { 18 box-sizing: inherit; 19 } 20 21 strong, b { 22 font-weight: 700; 23 } 24 25 body { 26 margin: 0; 27 color: rgba(0, 0, 0, 0.87); 28 font-family: "Roboto", "Helvetica", "Arial", sans-serif; 29 font-weight: 400; 30 font-size: 1rem; 31 line-height: 1.5; 32 letter-spacing: 0.00938em; 33 background-color: #fff; 34 } 35 36 @media print { 37 body { 38 background-color: #fff; 39 } 40 } 41 42 body::backdrop { 43 background-color: #fff; 44 }</style> 45 <style data-emotion="css 17ex9l5 i6s8oy 13gsxkh 145tzfz vubbuv 1p86egf eazhar 1d3jr1u 1xvs66j 1wxaqej 2pvxon kkens6 1oevxvn co3dvv ybmzf6 zi638n uj3p8u ldo4d5 1irqs2i 1c0cfyw 1m7nlmx isbt42 15j76c0 b0jfc8 9l3uo3 1etv89n 39bbo6 1ta0opo 1b1jvye 6flbmm 1is0dyx">.css-17ex9l5 { 46 background-color: #fff; 47 color: rgba(0, 0, 0, 0.87); 48 -webkit-transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; 49 transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; 50 box-shadow: none; 51 display: -webkit-box; 52 display: -webkit-flex; 53 display: -ms-flexbox; 54 display: flex; 55 -webkit-flex-direction: column; 56 -ms-flex-direction: column; 57 flex-direction: column; 58 width: 100%; 59 box-sizing: border-box; 60 -webkit-flex-shrink: 0; 61 -ms-flex-negative: 0; 62 flex-shrink: 0; 63 position: fixed; 64 z-index: 1100; 65 top: 0; 66 left: auto; 67 right: 0; 68 background-color: #E0BE36; 69 color: rgba(0, 0, 0, 0.87); 70 background-color: transparent; 71 -webkit-transition: all 0.5s; 72 transition: all 0.5s; 73 color: white; 74 } 75 76 @media print { 77 .css-17ex9l5 { 78 position: absolute; 79 } 80 } 81 82 .css-i6s8oy { 83 position: relative; 84 display: -webkit-box; 85 display: -webkit-flex; 86 display: -ms-flexbox; 87 display: flex; 88 -webkit-align-items: center; 89 -webkit-box-align: center; 90 -ms-flex-align: center; 91 align-items: center; 92 padding-left: 16px; 93 padding-right: 16px; 94 min-height: 56px; 95 } 96 97 @media (min-width: 600px) { 98 .css-i6s8oy { 99 padding-left: 24px; 100 padding-right: 24px; 101 } 102 } 103 104 @media (min-width: 0px) { 105 @media (orientation: landscape) { 106 .css-i6s8oy { 107 min-height: 48px; 108 } 109 } 110 } 111 112 @media (min-width: 600px) { 113 .css-i6s8oy { 114 min-height: 64px; 115 } 116 } 117 118 .css-13gsxkh { 119 margin: 0; 120 font: inherit; 121 color: #E0BE36; 122 -webkit-text-decoration: underline; 123 text-decoration: underline; 124 text-decoration-color: rgba(224, 190, 54, 0.4); 125 } 126 127 .css-13gsxkh:hover { 128 text-decoration-color: inherit; 129 } 130 131 .css-145tzfz { 132 display: -webkit-inline-box; 133 display: -webkit-inline-flex; 134 display: -ms-inline-flexbox; 135 display: inline-flex; 136 -webkit-align-items: center; 137 -webkit-box-align: center; 138 -ms-flex-align: center; 139 align-items: center; 140 -webkit-box-pack: center; 141 -ms-flex-pack: center; 142 -webkit-justify-content: center; 143 justify-content: center; 144 position: relative; 145 box-sizing: border-box; 146 -webkit-tap-highlight-color: transparent; 147 background-color: transparent; 148 outline: 0; 149 border: 0; 150 margin: 0; 151 border-radius: 0; 152 padding: 0; 153 cursor: pointer; 154 -webkit-user-select: none; 155 -moz-user-select: none;
156 -ms-user-select: none; 157 user-select: none; 158 vertical-align: middle; 159 -moz-appearance: none; 160 -webkit-appearance: none; 161 -webkit-text-decoration: none; 162 text-decoration: none; 163 color: inherit; 164 text-align: center; 165 -webkit-flex: 0 0 auto; 166 -ms-flex: 0 0 auto; 167 flex: 0 0 auto; 168 font-size: 1.5rem; 169 padding: 8px; 170 border-radius: 50%; 171 overflow: visible; 172 color: rgba(0, 0, 0, 0.54); 173 -webkit-transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; 174 transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; 175 margin-right: -12px; 176 color: inherit; 177 } 178 179 .css-145tzfz::-moz-focus-inner { 180 border-style: none; 181 } 182 183 .css-145tzfz.Mui-disabled { 184 pointer-events: none; 185 cursor: default; 186 } 187 188 @media print { 189 .css-145tzfz { 190 -webkit-print-color-adjust: exact; 191 color-adjust: exact; 192 } 193 } 194 195 .css-145tzfz:hover { 196 background-color: rgba(0, 0, 0, 0.04); 197 } 198 199 @media (hover: none) { 200 .css-145tzfz:hover { 201 background-color: transparent; 202 } 203 } 204 205 .css-145tzfz.Mui-disabled { 206 background-color: transparent; 207 color: rgba(0, 0, 0, 0.26); 208 } 209 210 @media (min-width: 0px) { 211 .css-145tzfz { 212 display: block; 213 } 214 } 215 216 @media (min-width: 900px) { 217 .css-145tzfz { 218 display: none; 219 } 220 } 221 222 .css-vubbuv { 223 -webkit-user-select: none; 224 -moz-user-select: none; 225 -ms-user-select: none; 226 user-select: none; 227 width: 1em; 228 height: 1em; 229 display: inline-block; 230 fill: currentColor; 231 -webkit-flex-shrink: 0; 232 -ms-flex-negative: 0; 233 flex-shrink: 0; 234 -webkit-transition: fill 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; 235 transition: fill 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; 236 font-size: 1.5rem; 237 } 238 239 .css-1p86egf { 240 display: -webkit-box; 241 display: -webkit-flex; 242 display: -ms-flexbox; 243 display: flex; 244 -webkit-flex-direction: row; 245 -ms-flex-direction: row; 246 flex-direction: row; 247 -webkit-align-items: center; 248 -webkit-box-align: center; 249 -ms-flex-align: center; 250 align-items: center; 251 } 252 253 .css-1p86egf > :not(style):not(style) { 254 margin: 0; 255 } 256 257 .css-1p86egf > :not(style) ~ :not(style) { 258 margin-left: 16px; 259 } 260 261 @media (min-width: 0px) { 262 .css-1p86egf { 263 display: none; 264 } 265 } 266 267 @media (min-width: 900px) { 268 .css-1p86egf { 269 display: block; 270 } 271 } 272 273 .css-eazhar { 274 display: -webkit-inline-box; 275 display: -webkit-inline-flex; 276 display: -ms-inline-flexbox; 277 display: inline-flex; 278 -webkit-align-items: center; 279 -webkit-box-align: center; 280 -ms-flex-align: center; 281 align-items: center; 282 -webkit-box-pack: center; 283 -ms-flex-pack: center; 284 -webkit-justify-content: center; 285 justify-content: center; 286 position: relative; 287 box-sizing: border-box; 288 -webkit-tap-highlight-color: transparent; 289 background-color: transparent; 290 outline: 0; 291 border: 0; 292 margin: 0; 293 border-radius: 0; 294 padding: 0; 295 cursor: pointer; 296 -webkit-user-select: none; 297 -moz-user-select: none; 298 -ms-user-select: none; 299 user-select: none; 300 vertical-align: middle; 301 -moz-appearance: none; 302 -webkit-appearance: none; 303 -webkit-text-decoration: none; 304 text-decoration: none; 305 color: inherit; 306 font-family: "Roboto", "Helvetica", "Arial", sans-serif; 307 font-weight: 500; 308 font-size: 0.875rem; 309 line-height: 1.75; 310 letter-spacing: 0.02857em; 311 text-transform: uppercase; 312 min-width: 64px; 313 padding: 6px 8px; 314 border-radius: 4px; 315 -webkit-transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, border-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; 316 transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, border-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; 317 color: #E0BE36; 318 color: inherit; 319 } 320 321 .css-eazhar::-moz-focus-inner { 322 border-style: none; 323 } 324 325 .css-eazhar.Mui-disabled { 326 pointer-events: none; 327 cursor: default; 328 } 329 330 @media print { 331 .css-eazhar { 332 -webkit-print-color-adjust: exact; 333 color-adjust: exact; 334 } 335 } 336 337 .css-eazhar:hover { 338 -webkit-text-decoration: none; 339 text-decoration: none; 340 background-color: rgba(224, 190, 54, 0.04); 341 } 342 343 @media (hover: none) { 344 .css-eazhar:hover { 345 background-color: transparent; 346 } 347 } 348 349 .css-eazhar.Mui-disabled { 350 color: rgba(0, 0, 0, 0.26); 351 } 352 353 .css-eazhar:hover { 354 -webkit-text-decoration: underline; 355 text-decoration: underline; 356 } 357 358 .css-1d3jr1u { 359 height: 50vh; 360 overflow: hidden; 361 position: relative; 362 margin: 0px; 363 padding: 0px; 364 } 365 366 .css-1xvs66j { 367 box-sizing: border-box; 368 display: -webkit-box; 369 display: -webkit-flex; 370 display: -ms-flexbox; 371 display: flex; 372 -webkit-box-flex-wrap: wrap; 373 -webkit-flex-wrap: wrap; 374 -ms-flex-wrap: wrap; 375 flex-wrap: wrap; 376 width: 100%; 377 -webkit-flex-direction: column; 378 -ms-flex-direction: column; 379 flex-direction: column; 380 margin-top: -16px; 381 width: calc(100% + 16px); 382 margin-left: -16px; 383 -webkit-align-items: center; 384 -webkit-box-align: center; 385 -ms-flex-align: center; 386 align-items: center; 387 -webkit-box-pack: center; 388 -ms-flex-pack: center;
389 -webkit-justify-content: center; 390 justify-content: center; 391 background-image: url(/background.jpg); 392 background-repeat: no-repeat; 393 -webkit-background-size: cover; 394 background-size: cover; 395 -webkit-background-position: top; 396 background-position: top; 397 width: 100%; 398 color: white; 399 padding: 16px; 400 -webkit-transition: opacity 1.5s ease-in-out; 401 transition: opacity 1.5s ease-in-out; 402 height: 100%; 403 position: absolute; 404 margin: 0px; 405 } 406 407 .css-1xvs66j > .MuiGrid-item { 408 max-width: none; 409 } 410 411 .css-1xvs66j > .MuiGrid-item { 412 padding-top: 16px; 413 } 414 415 .css-1xvs66j > .MuiGrid-item { 416 padding-left: 16px; 417 } 418 419 .css-1wxaqej { 420 box-sizing: border-box; 421 margin: 0; 422 -webkit-flex-direction: row; 423 -ms-flex-direction: row; 424 flex-direction: row; 425 } 426 427 .css-2pvxon { 428 margin: 0; 429 font-family: "Roboto", "Helvetica", "Arial", sans-serif; 430 font-weight: 400; 431 font-size: 3rem; 432 line-height: 1.167; 433 letter-spacing: 0em; 434 text-align: center; 435 } 436 437 .css-kkens6 { 438 background-color: #D45113; 439 min-width: 340px; 440 min-height: 2px; 441 } 442 443 .css-1oevxvn { 444 margin: 0; 445 font-family: "Roboto", "Helvetica", "Arial", sans-serif; 446 font-weight: 500; 447 font-size: 1.25rem; 448 line-height: 1.6; 449 letter-spacing: 0.0075em; 450 text-align: center; 451 } 452 453 .css-co3dvv { 454 width: 100%; 455 margin-left: auto; 456 box-sizing: border-box; 457 margin-right: auto; 458 display: block; 459 padding-left: 16px; 460 padding-right: 16px; 461 padding-top: 64px; 462 padding-left: 16px; 463 padding-right: 16px; 464 padding-bottom: 48px; 465 } 466 467 @media (min-width: 600px) { 468 .css-co3dvv { 469 padding-left: 24px; 470 padding-right: 24px; 471 } 472 } 473 474 @media (min-width: 900px) { 475 .css-co3dvv { 476 max-width: 900px; 477 } 478 } 479 480 .css-ybmzf6 { 481 margin: 0; 482 font-family: "Roboto", "Helvetica", "Arial", sans-serif; 483 font-weight: 300; 484 font-size: 3.75rem; 485 line-height: 1.2; 486 letter-spacing: -0.00833em; 487 text-align: center; 488 margin-bottom: 0.35em; 489 color: rgba(0, 0, 0, 0.87); 490 } 491 492 .css-zi638n { 493 margin: 0; 494 font-family: "Roboto", "Helvetica", "Arial", sans-serif; 495 font-weight: 400; 496 font-size: 1rem; 497 line-height: 1.5; 498 letter-spacing: 0.00938em; 499 text-align: center; 500 margin-bottom: 0.35em; 501 color: rgba(0, 0, 0, 0.6); 502 } 503 504 .css-uj3p8u { 505 margin: 0; 506 font-family: "Roboto", "Helvetica", "Arial", sans-serif; 507 font-weight: 400; 508 font-size: 1rem; 509 line-height: 1.5; 510 letter-spacing: 0.00938em; 511 text-align: center; 512 color: rgba(0, 0, 0, 0.6); 513 } 514 515 .css-ldo4d5 { 516 display: -webkit-box; 517 display: -webkit-flex; 518 display: -ms-flexbox; 519 display: flex; 520 -webkit-box-pack: center; 521 -ms-flex-pack: center; 522 -webkit-justify-content: center; 523 justify-content: center; 524 width: 100%; 525 } 526 527 .css-1irqs2i { 528 display: -webkit-inline-box; 529 display: -webkit-inline-flex; 530 display: -ms-inline-flexbox; 531 display: inline-flex; 532 -webkit-align-items: center; 533 -webkit-box-align: center; 534 -ms-flex-align: center; 535 align-items: center; 536 -webkit-box-pack: center; 537 -ms-flex-pack: center; 538 -webkit-justify-content: center; 539 justify-content: center; 540 position: relative; 541 box-sizing: border-box; 542 -webkit-tap-highlight-color: transparent; 543 background-color: transparent; 544 outline: 0; 545 border: 0; 546 margin: 0; 547 border-radius: 0; 548 padding: 0; 549 cursor: pointer; 550 -webkit-user-select: none; 551 -moz-user-select: none;
552 -ms-user-select: none; 553 user-select: none; 554 vertical-align: middle; 555 -moz-appearance: none; 556 -webkit-appearance: none; 557 -webkit-text-decoration: none; 558 text-decoration: none; 559 color: inherit; 560 font-family: "Roboto", "Helvetica", "Arial", sans-serif; 561 font-weight: 500; 562 font-size: 0.9375rem; 563 line-height: 1.75; 564 letter-spacing: 0.02857em; 565 text-transform: uppercase; 566 min-width: 64px; 567 padding: 8px 22px; 568 border-radius: 4px; 569 -webkit-transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, border-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; 570 transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, border-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; 571 color: #fff; 572 background-color: #D45113; 573 box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12); 574 } 575 576 .css-1irqs2i::-moz-focus-inner { 577 border-style: none; 578 } 579 580 .css-1irqs2i.Mui-disabled { 581 pointer-events: none; 582 cursor: default; 583 } 584 585 @media print { 586 .css-1irqs2i { 587 -webkit-print-color-adjust: exact; 588 color-adjust: exact; 589 } 590 } 591 592 .css-1irqs2i:hover { 593 -webkit-text-decoration: none; 594 text-decoration: none; 595 background-color: rgb(148, 56, 13); 596 box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12); 597 } 598 599 @media (hover: none) { 600 .css-1irqs2i:hover { 601 background-color: #D45113; 602 } 603 } 604 605 .css-1irqs2i:active { 606 box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12); 607 } 608 609 .css-1irqs2i.Mui-focusVisible { 610 box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12); 611 } 612 613 .css-1irqs2i.Mui-disabled { 614 color: rgba(0, 0, 0, 0.26); 615 box-shadow: none; 616 background-color: rgba(0, 0, 0, 0.12); 617 } 618 619 .css-1c0cfyw { 620 width: 100%; 621 margin-left: auto; 622 box-sizing: border-box; 623 margin-right: auto; 624 display: block; 625 padding-left: 16px; 626 padding-right: 16px; 627 } 628 629 @media (min-width: 600px) { 630 .css-1c0cfyw { 631 padding-left: 24px; 632 padding-right: 24px; 633 } 634 } 635 636 @media (min-width: 900px) { 637 .css-1c0cfyw { 638 max-width: 900px; 639 } 640 } 641 642 .css-1m7nlmx { 643 box-sizing: border-box; 644 display: -webkit-box; 645 display: -webkit-flex; 646 display: -ms-flexbox; 647 display: flex; 648 -webkit-box-flex-wrap: wrap; 649 -webkit-flex-wrap: wrap; 650 -ms-flex-wrap: wrap; 651 flex-wrap: wrap; 652 width: 100%; 653 -webkit-flex-direction: column; 654 -ms-flex-direction: column; 655 flex-direction: column; 656 margin-top: -32px; 657 width: calc(100% + 32px); 658 margin-left: -32px; 659 } 660 661 .css-1m7nlmx > .MuiGrid-item { 662 max-width: none; 663 } 664 665 .css-1m7nlmx > .MuiGrid-item { 666 padding-top: 32px; 667 } 668 669 .css-1m7nlmx > .MuiGrid-item { 670 padding-left: 32px; 671 } 672 673 .css-isbt42 { 674 box-sizing: border-box; 675 display: -webkit-box; 676 display: -webkit-flex; 677 display: -ms-flexbox; 678 display: flex; 679 -webkit-box-flex-wrap: wrap; 680 -webkit-flex-wrap: wrap; 681 -ms-flex-wrap: wrap; 682 flex-wrap: wrap; 683 width: 100%; 684 -webkit-flex-direction: row; 685 -ms-flex-direction: row; 686 flex-direction: row; 687 margin-top: -16px; 688 width: calc(100% + 16px); 689 margin-left: -16px; 690 } 691 692 .css-isbt42 > .MuiGrid-item { 693 padding-top: 16px; 694 } 695 696 .css-isbt42 > .MuiGrid-item { 697 padding-left: 16px; 698 } 699 700 .css-15j76c0 { 701 box-sizing: border-box; 702 margin: 0; 703 -webkit-flex-direction: row; 704 -ms-flex-direction: row; 705 flex-direction: row; 706 -webkit-flex-basis: 100%; 707 -ms-flex-preferred-size: 100%; 708 flex-basis: 100%; 709 -webkit-box-flex: 0; 710 -webkit-flex-grow: 0; 711 -ms-flex-positive: 0; 712 flex-grow: 0; 713 max-width: 100%; 714 } 715 716 @media (min-width: 600px) { 717 .css-15j76c0 { 718 -webkit-flex-basis: 100%; 719 -ms-flex-preferred-size: 100%; 720 flex-basis: 100%; 721 -webkit-box-flex: 0; 722 -webkit-flex-grow: 0; 723 -ms-flex-positive: 0; 724 flex-grow: 0; 725 max-width: 100%; 726 } 727 } 728 729 @media (min-width: 900px) { 730 .css-15j76c0 { 731 -webkit-flex-basis: 100%; 732 -ms-flex-preferred-size: 100%; 733 flex-basis: 100%; 734 -webkit-box-flex: 0; 735 -webkit-flex-grow: 0; 736 -ms-flex-positive: 0; 737 flex-grow: 0; 738 max-width: 100%; 739 } 740 } 741 742 @media (min-width: 1200px) { 743 .css-15j76c0 { 744 -webkit-flex-basis: 100%; 745 -ms-flex-preferred-size: 100%; 746 flex-basis: 100%; 747 -webkit-box-flex: 0; 748 -webkit-flex-grow: 0; 749 -ms-flex-positive: 0; 750 flex-grow: 0; 751 max-width: 100%; 752 } 753 } 754 755 @media (min-width: 1536px) { 756 .css-15j76c0 { 757 -webkit-flex-basis: 100%; 758 -ms-flex-preferred-size: 100%; 759 flex-basis: 100%; 760 -webkit-box-flex: 0; 761 -webkit-flex-grow: 0; 762 -ms-flex-positive: 0; 763 flex-grow: 0; 764 max-width: 100%; 765 } 766 } 767 768 .css-b0jfc8 { 769 margin: 0; 770 font-family: "Roboto", "Helvetica", "Arial", sans-serif; 771 font-weight: 400; 772 font-size: 2.125rem; 773 line-height: 1.235; 774 letter-spacing: 0.00735em; 775 text-align: center; 776 margin-bottom: 0.35em; 777 } 778 779 .css-9l3uo3 { 780 margin: 0; 781 font-family: "Roboto", "Helvetica", "Arial", sans-serif; 782 font-weight: 400; 783 font-size: 1rem; 784 line-height: 1.5; 785 letter-spacing: 0.00938em; 786 } 787 788 .css-1etv89n { 789 box-sizing: border-box; 790 margin: 0; 791 -webkit-flex-direction: row; 792 -ms-flex-direction: row; 793 flex-direction: row; 794 -webkit-flex-basis: 100%; 795 -ms-flex-preferred-size: 100%; 796 flex-basis: 100%; 797 -webkit-box-flex: 0; 798 -webkit-flex-grow: 0; 799 -ms-flex-positive: 0; 800 flex-grow: 0; 801 max-width: 100%; 802 } 803 804 @media (min-width: 600px) { 805 .css-1etv89n { 806 -webkit-flex-basis: 50%; 807 -ms-flex-preferred-size: 50%; 808 flex-basis: 50%; 809 -webkit-box-flex: 0; 810 -webkit-flex-grow: 0; 811 -ms-flex-positive: 0; 812 flex-grow: 0; 813 max-width: 50%; 814 } 815 } 816 817 @media (min-width: 900px) { 818 .css-1etv89n { 819 -webkit-flex-basis: 33.333333%; 820 -ms-flex-preferred-size: 33.333333%; 821 flex-basis: 33.333333%; 822 -webkit-box-flex: 0; 823 -webkit-flex-grow: 0; 824 -ms-flex-positive: 0; 825 flex-grow: 0; 826 max-width: 33.333333%; 827 } 828 } 829 830 @media (min-width: 1200px) { 831 .css-1etv89n { 832 -webkit-flex-basis: 25%; 833 -ms-flex-preferred-size: 25%; 834 flex-basis: 25%; 835 -webkit-box-flex: 0; 836 -webkit-flex-grow: 0; 837 -ms-flex-positive: 0; 838 flex-grow: 0; 839 max-width: 25%; 840 } 841 } 842 843 @media (min-width: 1536px) { 844 .css-1etv89n { 845 -webkit-flex-basis: 25%; 846 -ms-flex-preferred-size: 25%; 847 flex-basis: 25%; 848 -webkit-box-flex: 0; 849 -webkit-flex-grow: 0; 850 -ms-flex-positive: 0; 851 flex-grow: 0; 852 max-width: 25%; 853 } 854 } 855 856 .css-39bbo6 { 857 margin: 0; 858 -webkit-flex-shrink: 0; 859 -ms-flex-negative: 0; 860 flex-shrink: 0; 861 border-width: 0; 862 border-style: solid; 863 border-color: rgba(0, 0, 0, 0.12); 864 border-bottom-width: thin; 865 } 866 867 .css-1ta0opo { 868 background-color: #465362; 869 color: rgba(255, 255, 255, 0.7); 870 margin-top: 64px; 871 } 872 873 @media (min-width: 0px) { 874 .css-1ta0opo { 875 padding-bottom: 48px; 876 padding-top: 48px; 877 } 878 } 879 880 @media (min-width: 600px) { 881 .css-1ta0opo { 882 padding-bottom: 24px; 883 padding-top: 24px; 884 } 885 } 886 887 .css-1ta0opo ul { 888 margin: 0px; 889 padding: 0px; 890 list-style: none; 891 } 892 893 .css-1ta0opo li { 894 padding-top: 2.4px; 895 padding-bottom: 2.4px; 896 padding-left: 0px; 897 padding-right: 0px; 898 } 899 900 .css-1b1jvye { 901 box-sizing: border-box; 902 display: -webkit-box; 903 display: -webkit-flex; 904 display: -ms-flexbox; 905 display: flex; 906 -webkit-box-flex-wrap: wrap; 907 -webkit-flex-wrap: wrap; 908 -ms-flex-wrap: wrap; 909 flex-wrap: wrap; 910 width: 100%; 911 -webkit-flex-direction: row; 912 -ms-flex-direction: row; 913 flex-direction: row; 914 -webkit-box-pack: justify;
915 -webkit-justify-content: space-between; 916 justify-content: space-between; 917 -webkit-align-items: center; 918 -webkit-box-align: center; 919 -ms-flex-align: center; 920 align-items: center; 921 } 922 923 .css-6flbmm { 924 -webkit-user-select: none; 925 -moz-user-select: none; 926 -ms-user-select: none; 927 user-select: none; 928 width: 1em; 929 height: 1em; 930 display: inline-block; 931 fill: currentColor; 932 -webkit-flex-shrink: 0; 933 -ms-flex-negative: 0; 934 flex-shrink: 0; 935 -webkit-transition: fill 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; 936 transition: fill 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; 937 font-size: 2.1875rem; 938 } 939 940 .css-1is0dyx { 941 margin: 0; 942 font-family: "Roboto", "Helvetica", "Arial", sans-serif; 943 font-weight: 400; 944 font-size: 0.875rem; 945 line-height: 1.43; 946 letter-spacing: 0.01071em; 947 text-align: center; 948 color: inherit; 949 }</style> 950 <title data-react-helmet="true">QPED: Quality-focussed Programming Education</title> 951 <link data-react-helmet="true" rel="canonical" href="https://www.qped.eu"/> 952</head> 953<body> 954<div id="___gatsby"> 955 <div style="outline:none" tabindex="-1" id="gatsby-focus-wrapper"> 956 <header class="MuiPaper-root MuiPaper-elevation MuiPaper-elevation0 MuiAppBar-root MuiAppBar-colorPrimary MuiAppBar-positionFixed mui-fixed css-17ex9l5"> 957 <div class="MuiToolbar-root MuiToolbar-gutters MuiToolbar-regular css-i6s8oy" style="display:flex"> 958 <div style="flex-grow:1"><a aria-current="page" 959 class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways css-13gsxkh" 960 href="/"><img src="/logo.png" alt="siteName" 961 style="height:40px;display:block"/></a></div> 962 <button class="MuiButtonBase-root MuiIconButton-root MuiIconButton-colorInherit MuiIconButton-edgeEnd MuiIconButton-sizeMedium css-145tzfz" 963 tabindex="0" type="button" aria-label="open drawer"> 964 <svg class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-vubbuv" focusable="false" 965 aria-hidden="true" viewBox="0 0 24 24" data-testid="MenuIcon"> 966 <path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"></path> 967 </svg> 968 </button> 969 <div class="MuiStack-root css-1p86egf"> 970 <button class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium css-eazhar" 971 tabindex="0" type="button">About 972 </button> 973 <button class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium css-eazhar" 974 tabindex="0" type="button">Outputs 975 </button> 976 <button class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium css-eazhar" 977 tabindex="0" type="button">Library 978 </button> 979 <button class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium css-eazhar" 980 tabindex="0" type="button">Partners 981 </button> 982 <button class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium css-eazhar" 983 tabindex="0" type="button">Contact 984 </button> 985 </div> 986 </div> 987 </header> 988 <div class="MuiBox-root css-1d3jr1u"> 989 <div class="MuiGrid-root MuiGrid-container MuiGrid-spacing-xs-2 MuiGrid-direction-xs-column css-1xvs66j"> 990 <div class="MuiGrid-root MuiGrid-item css-1wxaqej"><h3 991 class="MuiTypography-root MuiTypography-h3 MuiTypography-alignCenter css-2pvxon">QPED</h3></div> 992 <div class="MuiGrid-root MuiGrid-item css-1wxaqej"> 993 <div class="MuiBox-root css-kkens6"></div> 994 </div> 995 <div class="MuiGrid-root MuiGrid-item css-1wxaqej"><h6 996 class="MuiTypography-root MuiTypography-h6 MuiTypography-alignCenter css-1oevxvn"> 997 Quality-focussed Programming Education</h6></div> 998 </div> 999 </div> 1000 <main class="MuiContainer-root MuiContainer-maxWidthMd css-co3dvv" id="about"><h1 1001 class="MuiTypography-root MuiTypography-h2 MuiTypography-alignCenter MuiTypography-gutterBottom css-ybmzf6"> 1002 Improving education in programming</h1> 1003 <p class="MuiTypography-root MuiTypography-body1 MuiTypography-alignCenter MuiTypography-gutterBottom css-zi638n">
1004 Our society heavily depends on software in almost every area of life, ranging from social-media apps 1005 installed on millions of mobile devices up to life-critical software in the automotive or avionic 1006 sector. Because we are so dependent on software, it is important that it functions correctly, can be 1007 maintained and, because it is used in many different contexts and operated by humans, is robust. 1008 Unfortunately, this is not the reality. Although tools and techniques exist to improve software quality, 1009 today's programmers seem reluctant to use them.</p> 1010 <p class="MuiTypography-root MuiTypography-body1 MuiTypography-alignCenter css-uj3p8u">To remedy this we 1011 need to redesign the curriculum for software engineering and general computer science studies, and put 1012 more focus on quality assurance and software testing early on. The Erasmus+ Project QPED 1013 (Quality-focused Programming Education) will create new course material and a toolkit to achieve 1014 this.</p> 1015 <p class="MuiTypography-root MuiTypography-body1 MuiTypography-alignCenter MuiTypography-gutterBottom css-zi638n"> 1016 The new course material will put emphasis on proper testing as early in the education as possible, to 1017 foster a quality-awareness in students that goes beyond functional correctness as demonstrated by 1018 testing; they will also start thinking about better readable and more robust code.</p> 1019 <p class="MuiTypography-root MuiTypography-body1 MuiTypography-alignCenter MuiTypography-gutterBottom css-zi638n"> 1020 To ensure that testing and paying attention to code quality is not only taught early, but also performed 1021 by students from the beginning, we will provide a toolkit that can automatically provide feedback on the 1022 quality of the code produced by students. It will support the most common object-oriented and imperative 1023 programming languages, such as Java, Python and C.</p> 1024 <p class="MuiTypography-root MuiTypography-body1 MuiTypography-alignCenter MuiTypography-gutterBottom css-zi638n"> 1025 The toolkit and all material will be provided free of charge and can be used inside the Quarterfall 1026 learning platform.</p> 1027 <div class="MuiBox-root css-ldo4d5"><a 1028 class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedSecondary MuiButton-sizeLarge MuiButton-containedSizeLarge MuiButton-root MuiButton-contained MuiButton-containedSecondary MuiButton-sizeLarge MuiButton-containedSizeLarge css-1irqs2i" 1029 tabindex="0" href="ios" style="margin-top:32px">Read more</a></div> 1030 </main> 1031 <div class="MuiContainer-root MuiContainer-maxWidthMd css-1c0cfyw"> 1032 <div class="MuiGrid-root MuiGrid-container MuiGrid-spacing-xs-4 MuiGrid-direction-xs-column css-1m7nlmx"> 1033 <div class="MuiGrid-root MuiGrid-item css-1wxaqej" id="library"> 1034 <div class="MuiGrid-root MuiGrid-container MuiGrid-spacing-xs-2 css-isbt42"> 1035 <div class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 css-15j76c0"> 1036 <div class="MuiBox-root css-ldo4d5"><h4 1037 class="MuiTypography-root MuiTypography-h4 MuiTypography-alignCenter MuiTypography-gutterBottom css-b0jfc8"> 1038 Library</h4></div> 1039 </div> 1040 <div class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 css-15j76c0"><p 1041 class="MuiTypography-root MuiTypography-body1 css-9l3uo3">We publish several tools and 1042 libraries written as part of the QPED project on<!-- --> <a 1043 href="https://github.com/qped-eu" target="_blank">GitHub</a>. The following 1044 libraries are available:</p> 1045 <ul> 1046 <li><p class="MuiTypography-root MuiTypography-body1 css-9l3uo3"><a 1047 href="https://github.com/qped-eu/MASS-checker" target="_blank">MASS checker</a> 1048 </p></li> 1049 <li><p class="MuiTypography-root MuiTypography-body1 css-9l3uo3"><a 1050 href="https://github.com/qped-eu/mass" target="_blank">MASS configuration 1051 generator</a></p></li> 1052 <li><p class="MuiTypography-root MuiTypography-body1 css-9l3uo3"><a 1053 href="https://github.com/qped-eu/rubrics-creation-tool" target="_blank">Rubrics 1054 creation tool</a></p></li> 1055 <li><p class="MuiTypography-root MuiTypography-body1 css-9l3uo3"><a 1056 href="https://github.com/qped-eu/PythonChecker" target="_blank">Python style 1057 checker tool</a></p></li> 1058 <li><p class="MuiTypography-root MuiTypography-body1 css-9l3uo3"><a 1059 href="https://github.com/quarterfall/cloudcheck" target="_blank">Cloud-based 1060 code running server</a></p></li> 1061 <li><p class="MuiTypography-root MuiTypography-body1 css-9l3uo3"><a 1062 href="https://github.com/quarterfall/parseidon" target="_blank">ParseidonJS: 1063 analyze design patterns in Mermaid diagrams</a></p></li> 1064 <li><p class="MuiTypography-root MuiTypography-body1 css-9l3uo3"><a href="./pg.pdf" 1065 target="_blank">Procedural 1066 guidance</a></p></li> 1067 <li><p class="MuiTypography-root MuiTypography-body1 css-9l3uo3"><a 1068 href="./broeders2022.pdf" target="_blank">Master thesis: "How do explicit specifications, a 1069 test-first approach, and procedural guidance to convert specifications to tests, help to improve c
1069ode 1070 quality among students" by Arno Broeders.</a></p></li> 1071 <li><p class="MuiTypography-root MuiTypography-body1 css-9l3uo3"><a 1072 href="https://tile-repository.github.io" target="_blank">TILE repository</a></p> 1073 </li> 1074 </ul> 1075 </div> 1076 </div> 1077 </div> 1078 <div class="MuiGrid-root MuiGrid-item css-1wxaqej" id="partners"> 1079 <div class="MuiGrid-root MuiGrid-container MuiGrid-spacing-xs-2 css-isbt42"> 1080 <div class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 css-15j76c0"> 1081 <div class="MuiBox-root css-ldo4d5"><h4 1082 class="MuiTypography-root MuiTypography-h4 MuiTypography-alignCenter MuiTypography-gutterBottom css-b0jfc8"> 1083 Partners</h4></div> 1084 </div> 1085 <div class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-6 MuiGrid-grid-md-4 MuiGrid-grid-lg-3 css-1etv89n"> 1086 <a class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways css-13gsxkh" 1087 href="https://www.ou.nl" target="_blank"><img src="partners/ou.png" style="width:200px"/></a> 1088 </div> 1089 <div class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-6 MuiGrid-grid-md-4 MuiGrid-grid-lg-3 css-1etv89n"> 1090 <a class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways css-13gsxkh" 1091 href="https://www.uni-marburg.de" target="_blank"><img src="partners/marburg.svg" 1092 style="width:200px"/></a></div> 1093 <div class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-6 MuiGrid-grid-md-4 MuiGrid-grid-lg-3 css-1etv89n"> 1094 <a class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways css-13gsxkh" 1095 href="https://www.tue.nl" target="_blank"><img src="partners/tue.png" 1096 style="width:200px"/></a></div> 1097 <div class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-6 MuiGrid-grid-md-4 MuiGrid-grid-lg-3 css-1etv89n"> 1098 <a class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways css-13gsxkh" 1099 href="https://www.uoc.edu/" target="_blank"><img src="partners/uoc.png" 1100 style="width:200px"/></a></div> 1101 <div class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-6 MuiGrid-grid-md-4 MuiGrid-grid-lg-3 css-1etv89n"> 1102 <a class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways css-13gsxkh" 1103 href="https://www.quarterfall.com" target="_blank"><img src="partners/quarterfall.png" 1104 style="width:200px"/></a></div> 1105 </div> 1106 </div> 1107 <div class="MuiGrid-root MuiGrid-item css-1wxaqej" id="contact"> 1108 <div class="MuiGrid-root MuiGrid-container MuiGrid-spacing-xs-2 css-isbt42"> 1109 <div class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 css-15j76c0"> 1110 <div class="MuiBox-root css-ldo4d5"><h4 1111 class="MuiTypography-root MuiTypography-h4 MuiTypography-alignCenter MuiTypography-gutterBottom css-b0jfc8"> 1112 Contact</h4></div> 1113 </div> 1114 <div class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 css-15j76c0"><p 1115 class="MuiTypography-root MuiTypography-body1 css-9l3uo3">
1115For more information about the 1116 project, please contact the<!-- --> <a href="mailto:[email protected]">coordinator</a> of 1117 the project.</p></div> 1118 </div> 1119 </div> 1120 <div class="MuiGrid-root MuiGrid-item css-1wxaqej"> 1121 <hr class="MuiDivider-root MuiDivider-fullWidth css-39bbo6"/> 1122 <div class="MuiBox-root css-ldo4d5"><a 1123 class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways css-13gsxkh" 1124 href="https://ec.europa.eu/programmes/erasmus-plus/node_en" target="_blank"><img 1125 src="/erasmus.png" alt="Erasmus" style="width:400px;margin-top:32px"/></a></div> 1126 </div> 1127 </div> 1128 </div> 1129 <div class="MuiBox-root css-1ta0opo"> 1130 <div class="MuiContainer-root MuiContainer-maxWidthMd css-1c0cfyw"> 1131 <div class="MuiGrid-root MuiGrid-container css-1b1jvye"> 1132 <div class="MuiGrid-root MuiGrid-item css-1wxaqej"><a href="https://www.linkedin.com/company/qped" 1133 target="_blank" 1134 style="margin-left:-5px;color:rgba(255, 255, 255, 0.7)"> 1135 <svg class="MuiSvgIcon-root MuiSvgIcon-fontSizeLarge css-6flbmm" focusable="false" 1136 aria-hidden="true" viewBox="0 0 24 24" data-testid="LinkedinIcon"> 1137 <path d="M19 3A2 2 0 0 1 21 5V19A2 2 0 0 1 19 21H5A2 2 0 0 1 3 19V5A2 2 0 0 1 5 3H19M18.5 18.5V13.2A3.26 3.26 0 0 0 15.24 9.94C14.39 9.94 13.4 10.46 12.92 11.24V10.13H10.13V18.5H12.92V13.57C12.92 12.8 13.54 12.17 14.31 12.17A1.4 1.4 0 0 1 15.71 13.57V18.5H18.5M6.88 8.56A1.68 1.68 0 0 0 8.56 6.88C8.56 5.95 7.81 5.19 6.88 5.19A1.69 1.69 0 0 0 5.19 6.88C5.19 7.81 5.95 8.56 6.88 8.56M8.27 18.5V10.13H5.5V18.5H8.27Z"></path> 1138 </svg> 1139 </a></div> 1140 <div class="MuiGrid-root MuiGrid-item css-1wxaqej"><p 1141 class="MuiTypography-root MuiTypography-body2 MuiTypography-alignCenter css-1is0dyx"> 1142 Copyright © QPED 2023.</p></div> 1143 </div> 1144 </div> 1145 </div> 1146 </div> 1147 <div id="gatsby-announcer" 1148 style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" 1149 aria-live="assertive" aria-atomic="true"></div> 1150</div>
1151<script id="gatsby-script-loader">/*<![CDATA[*/ 1152window.pagePath = "/"; 1153window.___webpackCompilationHash = "d8afd2f4ae454f08f8fe";/*]]>*/</script>
vendor: 1 bytes, line 1153
1153
1154<script id="gatsby-chunk-mapping">/*<![CDATA[*/ 1155window.___chunkMapping = { 1156 "app": ["/app-0fcd6a7d9884621fef04.js"], 1157 "component---src-pages-index-tsx": ["/component---src-pages-index-tsx-4414a380a1baee545330.js"], 1158 "component---src-pages-io-1-tsx": ["/component---src-pages-io-1-tsx-608a57dc60325be39c54.js"], 1159 "component---src-pages-io-2-tsx": ["/component---src-pages-io-2-tsx-51b62c1ac38f00a4be20.js"], 1160 "component---src-pages-io-3-tsx": ["/component---src-pages-io-3-tsx-57e3e9d7f876dd658582.js"], 1161 "component---src-pages-io-4-tsx": ["/component---src-pages-io-4-tsx-1e89a1c474b6937b5daa.js"], 1162 "component---src-pages-ios-tsx": ["/component---src-pages-ios-tsx-bd01efdc6b22cd2fd371.js"] 1163};/*]]>*/</script>
vendor: 1 bytes, line 1163
1163
1164<script src="/app-0fcd6a7d9884621fef04.js" async=""></script>
vendor: 1 bytes, line 1164
1164
1165<script src="/framework-70b2ccb48a8ffea0847a.js" async=""></script>
vendor: 1 bytes, line 1165
1165
1166<script src="/webpack-runtime-24ea6e91e6a7b43b1b0a.js" async=""></script>
1166 1167</body> 1168</html>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.