Perspektiven auf die Natur-Mensch-Beziehung

Ordne dich selbst ein

Wir gehen im Unterricht die Dimensionen (Grammatik) der Natur-Mensch-Beziehung nach Muradian and Pascual (2018) durch. Wähle für jede Dimension die Aussage, die deiner eigenen Sicht am nächsten kommt. Am Ende siehst du, welcher Perspektive du am ehesten entsprichst.

Alle Antworten bleiben in deinem Browser. Es werden keine Daten gesendet oder gespeichert (ausser lokal in deinem Broswer, damit dein Fortschritt bei dir gespeichert bleibt).

grammar = FileAttachment("../slides-overview/slides/data/mensch-natur/mensch-natur.json").json()

models = grammar.models

dimensions = grammar.dimensions

storageKey = "hn-perspektiven-v1"

function loadAnswers() {
  try {
    const raw = localStorage.getItem(storageKey);
    if (raw) {
      const a = JSON.parse(raw);
      if (Array.isArray(a) && a.length === dimensions.length) return a;
    }
  } catch (e) {}
  return dimensions.map(() => null);
}

function saveAnswers(a) {
  try { localStorage.setItem(storageKey, JSON.stringify(a)); } catch (e) {}
}

mutable answers = loadAnswers()

mutable step = 0

counts = {
  const c = Object.fromEntries(Object.keys(models).map(k => [k, 0]));
  answers.forEach((ai, di) => {
    if (ai == null) return;
    for (const m of dimensions[di].options[ai].models) c[m] += 1;
  });
  return c;
}

result = {
  const answered = answers.filter(a => a != null).length;
  const entries = Object.entries(counts);
  const max = Math.max(...entries.map(e => e[1]));
  const winners = entries.filter(e => e[1] === max && max > 0).map(e => e[0]);
  return { answered, max, winners };
}

resultChart = {
  const data = Object.entries(counts).map(([k, v]) => ({
    modell: models[k].label,
    wert: v
  }));
  return Plot.plot({
    marginLeft: 150,
    marginBottom: 52,
    height: 320,
    style: { background: "transparent", color: "#F8FAFB", fontSize: "13px", overflow: "visible" },
    x: { label: "Übereinstimmung (Anzahl Dimensionen)", domain: [0, dimensions.length], grid: true, ticks: dimensions.length, labelOffset: 42, labelAnchor: "center" },
    y: { label: null },
    marks: [
      Plot.barX(data, { x: "wert", y: "modell", sort: { y: "x", reverse: true }, fill: "#03FF54" }),
      Plot.ruleX([0], { stroke: "#F8FAFB" })
    ]
  });
}

app = {
  const N = dimensions.length;
  const wrap = html`<div class="hn-app"></div>`;

  if (step < N) {
    const dim = dimensions[step];
    const chosen = answers[step];
    const pct = Math.round((step / N) * 100);

    const track = html`<div class="hn-progress-track"><div class="hn-progress-bar" style="width:${pct}%"></div></div>`;
    const label = html`<div class="hn-step-label">Dimension ${step + 1} / ${N}</div>`;
    const title = html`<div class="hn-dim-title">${dim.title}</div>`;
    const gloss = html`<div class="hn-dim-gloss">${dim.gloss}</div>`;

    const opts = html`<div class="hn-opts"></div>`;
    dim.options.forEach((opt, i) => {
      const b = html`<button type="button" class="hn-opt ${chosen === i ? "is-selected" : ""}">${opt.label}</button>`;
      b.onclick = () => {
        const next = answers.slice();
        next[step] = i;
        saveAnswers(next);
        mutable answers = next;
      };
      opts.appendChild(b);
    });

    const back = html`<button type="button" class="hn-btn" ${step === 0 ? "disabled" : ""}>Zurück</button>`;
    back.onclick = () => { mutable step = Math.max(0, step - 1); };

    const isLast = step === N - 1;
    const fwd = html`<button type="button" class="hn-btn hn-btn-primary" ${chosen == null ? "disabled" : ""}>${isLast ? "Auswerten" : "Weiter"}</button>`;
    fwd.onclick = () => { if (answers[step] != null) mutable step = step + 1; };

    const nav = html`<div class="hn-nav"></div>`;
    nav.appendChild(back);
    nav.appendChild(fwd);

    const restart = html`<button type="button" class="hn-btn" style="border-color:#3a3a3a;opacity:.7;font-size:.82rem;padding:.4rem 1.1rem;margin:1rem auto 0;display:block;">Quiz zurücksetzen</button>`;
    restart.onclick = () => {
      const fresh = dimensions.map(() => null);
      saveAnswers(fresh);
      mutable answers = fresh;
      mutable step = 0;
    };

    [track, label, title, gloss, opts, nav].forEach(el => wrap.appendChild(el));
    if (answers.some(a => a != null)) wrap.appendChild(restart);
  } else {
    const { max, winners } = result;
    const card = html`<div class="hn-card"></div>`;
    if (winners.length === 1) {
      const m = models[winners[0]];
      card.appendChild(html`<div class="hn-result-head">Du entsprichst am ehesten der Perspektive</div>`);
      card.appendChild(html`<div class="hn-result-name">${m.label}</div>`);
      card.appendChild(html`<div class="hn-result-de">${m.de}</div>`);
      card.appendChild(html`<div class="hn-result-blurb">${m.blurb}</div>`);
    } else {
      card.appendChild(html`<div class="hn-result-head">Du bewegst dich gleichauf zwischen mehreren Perspektiven:</div>`);
      const names = winners.map(k => models[k].label + " (" + models[k].de + ")").join(", ");
      card.appendChild(html`<div class="hn-result-name" style="font-size:1.4rem">${names}</div>`);
      winners.forEach(k => {
        card.appendChild(html`<div class="hn-result-blurb"><strong style="color:#CDFFB6">${models[k].label}:</strong> ${models[k].blurb}</div>`);
      });
    }
    card.appendChild(html`<div class="hn-mix">Übereinstimmung: ${max} von ${dimensions.length} Dimensionen. Fast alle Menschen sind eine <em>Mischung</em> – die Verteilung unten zeigt, wie stark du welche Perspektive teilst.</div>`);
    card.appendChild(resultChart);

    const back = html`<button type="button" class="hn-btn">Antworten überprüfen</button>`;
    back.onclick = () => { mutable step = N - 1; };
    const reset = html`<button type="button" class="hn-btn hn-btn-primary">Neu starten</button>`;
    reset.onclick = () => {
      const fresh = dimensions.map(() => null);
      saveAnswers(fresh);
      mutable answers = fresh;
      mutable step = 0;
    };
    const nav = html`<div class="hn-nav"></div>`;
    nav.appendChild(back);
    nav.appendChild(reset);

    wrap.appendChild(card);
    wrap.appendChild(nav);
  }

  return wrap;
}

Grundlage

Dieses Tool zur Selbsteinordnung basiert auf der Typologie elementarer Formen der Natur-Mensch-Beziehung von Muradian and Pascual (2018). Die sieben Perspektiven und ihre Dimensionen (Grammatik) sind idealtypische Kategorien.

Muradian, Roldan, and Unai Pascual. 2018. “A Typology of Elementary Forms of Human-Nature Relations: A Contribution to the Valuation Debate.” Current Opinion in Environmental Sustainability 35 (December): 8–14. https://doi.org/10.1016/j.cosust.2018.10.014.