原生js实现一个自动解析json url表单配置选项测验多步骤考试代码-html代码-BFW代码库

原生js实现一个自动解析json url表单配置选项测验多步骤考试代码

代码语言：html

代码描述：原生js实现一个自动解析json url表单配置选项测验多步骤考试代码

代码标签：原生 js 自动解析 json url 表单配置选项测验多步骤考试代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  

  
  
<style>
/* =========================
   DEFAULT QUIZ STYLES
   ========================= */
:root {
  --qz-bg: grey;
  --qz-panel: #121214;
  --qz-text: #f4f5f7;
  --qz-muted: #a8acb3;
  --qz-brand: #4da3ff;
  --qz-right: #2ecc71;
  --qz-wrong: #ff5c5c;
  --qz-border: #1f232a;
  --qz-focus: #ffe08a;
  --qz-radius: 0px;
  --qz-pad: clamp(14px, 2.2vw, 22px);
  --qz-gap: clamp(12px, 1.6vw, 18px);
  --qz-font: system-ui, "Helvetica Neue", Arial;
}
* {
  box-sizing: border-box;
}
html,
body {
  height: 100%;
}
body {
  margin: 0;
  background: var(--qz-bg);
  color: var(--qz-text);
  font: 16px/1.5 var(--qz-font);
}
.quiz {
  max-width: 860px;
  margin: 6vh auto;
  padding: var(--qz-pad);
}
.qz-stage {padding-top:30px;}
.qz-card {
  background: var(--qz-panel);
  border: 1px solid var(--qz-border);
  border-radius: var(--qz-radius);
  padding: var(--qz-pad);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22);
}
.qz-title {
  margin: 0 0 0.25rem 0;
  font-weight: 750;
  font-size: clamp(1.4rem, 2.2vw + 0.6rem, 2rem);
}
.qz-subtitle {
  margin: 0;
  color: var(--qz-muted);
  font-size: 0.975rem;
}
.qz-description {
  margin: 0.6rem 0 1rem 0;
  color: var(--qz-text);
  font-size: 1rem;
}

.qz-progress-wrap {
  margin: 0.75rem 0 1rem 0;
}
.qz-progress {
  height: 10px;
  border-radius: 999px;
  background: #1a1d23;
  overflow: hidden;
}
.qz-progress > span {
  display: block;
  height: 100%;
  width: 0%;
  /* fallback keeps your original gradient if theme doesn't set one */
  background: var(
    --qz-progress-gradient,
    linear-gradient(90deg, #2ecc71, #4da3ff)
  );
  transition: width 0.35s ease;
}
.qz-count {
  margin-top: 0.5rem;
  color: var(--qz-muted);
  font-size: 0.95rem;
  
}

.qz-question {
  margin: 0 0 0.4rem 0;
  font-weight: 700;
  font-size: clamp(1.05rem, 1.4vw + 0.6rem, 1.25rem);
}
.qz-meta {
  color: var(--qz-muted);
  font-size: 0.9rem;
  margin-bottom: 0.8rem;
}

.qz-group {
  display: grid;
  gap: var(--qz-gap);
  margin: 0.6rem 0 1.2rem 0;
}
.qz-option {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  padding: 0.85rem 0.9rem;
  border: 1px solid var(--qz-border);
  border-radius: 12px;
  background: #0f1012;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.qz-option:hover {
  border-color: #2b313b;
  background: #121316;
}
.qz-option input {
  margin-top: 0.1rem;
  accent-color: var(--qz-brand);
}

.qz-actions {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin-top:35px;
  margin-bottom:35px;
}
.qz-btn {
  appearance: none;
  border: 1px solid var(--qz-border);
  background: #0f0f12;
  color: var(--qz-text);
  padding: 0.72rem 1rem;
  border-radius: 12px;
  font-weight: 700;
  cursor: pointer;
}
.qz-btn.primary {
  background: linear-gradient(180deg, #3b86ff, #2467d7);
  border-color: #205ec9;
}
.qz-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.qz-results {
  margin-top: 1rem;
}
.qz-result-item {
  border: 1px solid var(--qz-border);
  background: #0e0f11;
  border-radius: 12px;
  padding: 0.85rem 0.9rem;
  margin: 0.6rem 0;
}
.qz-result-item .qz-rq {
  font-weight: 700;
  margin-bottom:10px;
}
.qz-badge {
  display: inline-block;
  padding: 0.15rem 0.45rem;
  border-radius: 0;
  font-size: 0.8rem;
  font-weight: 700;
  margin-left: 1rem;

}
.qz-badge.ok {
  background: color-mix(in srgb, var(--qz-right) 30%, trans.........完整代码请登录后点击上方下载按钮下载查看