efficience-it.github.io/quizz_docker.html at main · efficience-it/efficience-it.github.io · GitHub

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
<!DOCTYPE html>
<html lang="en">
<head>
    <script src="assets/js/gtag.js"></script>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title id="page-title">Quiz — Docker DCA Practice</title>
    <meta name="description" content="Practice quiz for Docker DCA certification. Answer questions and get instant feedback." />
    <meta property="og:title" content="Docker DCA Practice Quiz" />
    <meta property="og:description" content="Practice quiz for Docker DCA certification. Answer questions and get instant feedback." />
    <meta property="og:type" content="website" />
    <meta name="twitter:card" content="summary" />
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet" />
    <script src="https://cdn.tailwindcss.com/3.4.16"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/js-yaml/4.1.0/js-yaml.min.js"></script>
    <script>
      tailwind.config = {
        darkMode: 'class',
        theme: {
          extend: {
            fontFamily: {
              sans: ['Inter', 'system-ui', '-apple-system', 'sans-serif'],
            },
          },
        },
      }
    </script>
    <style>
        .answer-label {
            word-break: break-word;
            overflow-wrap: anywhere;
            hyphens: auto;
        }
        .answer-item {
            min-width: 0;
        }
        #questions-container > div {
            background: white;
            border: 1px solid #e5e7eb;
            border-radius: 0.75rem;
        }
        #questions-container > div.mb-4 {
            background: white;
            border: 1px solid #e5e7eb;
            border-radius: 0.75rem;
        }
        .dark #questions-container > div,
        .dark #questions-container > div.mb-4 {
            background: #1f2937;
            border-color: #374151;
        }
    </style>
</head>
<body class="bg-stone-50 dark:bg-gray-900 px-2 sm:px-4 font-sans dark:text-gray-200">
<a href="#questions-container" class="sr-only focus:not-sr-only focus:absolute focus:top-2 focus:left-2 focus:bg-indigo-600 focus:text-white focus:px-4 focus:py-2 focus:rounded-lg focus:z-50">Skip to questions</a>
<noscript>
    <iframe src="https://www.googletagmanager.com/ns.html?id=GTM-M5HHV7GC"
            height="0" width="0" style="display:none;visibility:hidden"></iframe>
</noscript>
<header class="bg-white dark:bg-gray-900 border-b border-gray-200 dark:border-gray-700 p-4 text-center mb-0">
    <div class="max-w-3xl mx-auto flex items-center justify-between">
        <a href="index.html" class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 text-sm flex items-center gap-1 transition duration-200">
            &larr; Back to categories
        </a>
        <h1 id="quiz-title" class="text-xl sm:text-2xl font-semibold tracking-tight text-gray-900 dark:text-white"></h1>
        <span class="w-32"></span>
    </div>
</header>
<div class="max-w-3xl mx-auto bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-b-xl px-3 sm:px-6 py-6 pb-16">
    <div id="score" class="text-xl text-center m-4" aria-live="polite"></div>
    <div id="progress" class="mb-4">
        <div class="flex justify-between text-sm text-gray-500 mb-1">
            <span id="progress-text" aria-live="polite">0/0 answered</span>
        </div>
        <div class="w-full bg-gray-100 dark:bg-gray-700 rounded-full h-1.5">
            <div id="progress-bar" class="bg-indigo-600 h-1.5 rounded-full transition-all duration-300" style="width: 0%"></div>
        </div>
    </div>
    <form id="quiz-form">
        <div id="questions-container" class="pb-16">
            <div id="loading-spinner" class="flex flex-col items-center justify-center py-20 text-gray-400">
                <svg class="animate-spin h-8 w-8 mb-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                    <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                    <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path>
                </svg>
                <span class="text-sm">Loading questions...</span>
            </div>
        </div>
        <div class="fixed bottom-0 left-0 w-full bg-white/80 dark:bg-gray-900/80 backdrop-blur-sm border-t border-gray-200 dark:border-gray-700 p-2 flex justify-center space-x-2">
            <button type="button" id="restart-quiz"
                    class="px-4 py-2 bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-200 font-medium rounded-lg border border-gray-300 dark:border-gray-600 hover:bg-gray-50 dark:hover:bg-gray-700 transition duration-200 text-sm">
                Restart
            </button>
            <button type="submit"
                    class="px-4 py-2 bg-indigo-600 text-white font-medium rounded-lg hover:bg-indigo-700 transition duration-200 text-sm">
                Validate
            </button>
        </div>
    </form>
</div>
<script>
  (function () {
    var stored = localStorage.getItem("theme");
    var prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
    if (stored === "dark" || (!stored && prefersDark)) {
      document.documentElement.classList.add("dark");
    }
  })();
</script>
<script src="./assets/js/common.js"></script>
<script src="./assets/js/topics.js"></script>
<script src="./assets/js/quiz-ui.js"></script>
<script src="./assets/js/quizz_docker.js"></script>
</body>
</html>