555 lines
27 KiB
HTML
555 lines
27 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<title>Tmp</title>
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
<link rel="stylesheet" href="https://bootswatch.com/4/united/bootstrap.css">
|
||
<style>
|
||
.border-heavy {
|
||
border-width: 4px !important;
|
||
}
|
||
</style>
|
||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.3.0/font/bootstrap-icons.css">
|
||
</head>
|
||
<body class="py-5">
|
||
<div class="container">
|
||
<h1>Jak pytać o płeć?</h1>
|
||
<h2>Pytaj tylko o to, czego serio potrzebujesz</h2>
|
||
<p>…</p>
|
||
<p>A jak już musisz, to fajnie by było wyjaśnić ludziom, po co Ci one</p>
|
||
<h2>Podstawy:</h2>
|
||
<div class="row">
|
||
<div class="col-lg-4 mb-4">
|
||
<div class="card">
|
||
<div class="card-header bg-danger text-white">
|
||
✘ Źle
|
||
</div>
|
||
<div class="card-body">
|
||
<fieldset class="p-2">
|
||
<label><strong>Płeć:</strong></label>
|
||
<div class="form-check">
|
||
<label class="form-check-label">
|
||
<input type="radio" class="form-check-input" name="optionsRadios" value="option1">
|
||
Mężczyzna
|
||
</label>
|
||
</div>
|
||
<div class="form-check">
|
||
<label class="form-check-label">
|
||
<input type="radio" class="form-check-input" name="optionsRadios" value="option1">
|
||
Kobieta
|
||
</label>
|
||
</div>
|
||
</fieldset>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-lg-4 mb-4">
|
||
<div class="card">
|
||
<div class="card-header bg-danger text-white">
|
||
✘ Źle
|
||
</div>
|
||
<div class="card-body">
|
||
<fieldset class="p-2">
|
||
<label><strong>Płeć:</strong></label>
|
||
<div class="form-check">
|
||
<label class="form-check-label">
|
||
<input type="radio" class="form-check-input" name="optionsRadios" value="option1">
|
||
Mężczyzna
|
||
</label>
|
||
</div>
|
||
<div class="form-check">
|
||
<label class="form-check-label">
|
||
<input type="radio" class="form-check-input" name="optionsRadios" value="option1">
|
||
Kobieta
|
||
</label>
|
||
</div>
|
||
<div class="form-check">
|
||
<label class="form-check-label">
|
||
<input type="radio" class="form-check-input" name="optionsRadios" value="option1">
|
||
Trans
|
||
</label>
|
||
</div>
|
||
</fieldset>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-lg-4 mb-4">
|
||
<div class="card">
|
||
<div class="card-header bg-danger text-white">
|
||
✘ Źle
|
||
</div>
|
||
<div class="card-body">
|
||
<fieldset class="p-2">
|
||
<label><strong>Płeć:</strong></label>
|
||
<div class="form-check">
|
||
<label class="form-check-label">
|
||
<input type="radio" class="form-check-input" name="optionsRadios" value="option1">
|
||
Mężczyzna
|
||
</label>
|
||
</div>
|
||
<div class="form-check">
|
||
<label class="form-check-label">
|
||
<input type="radio" class="form-check-input" name="optionsRadios" value="option1">
|
||
Kobieta
|
||
</label>
|
||
</div>
|
||
<div class="form-check">
|
||
<label class="form-check-label">
|
||
<input type="radio" class="form-check-input" name="optionsRadios" value="option1">
|
||
Trans mężczyzna
|
||
</label>
|
||
</div>
|
||
<div class="form-check">
|
||
<label class="form-check-label">
|
||
<input type="radio" class="form-check-input" name="optionsRadios" value="option1">
|
||
Trans kobieta
|
||
</label>
|
||
</div>
|
||
</fieldset>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-lg-4 mb-4">
|
||
<div class="card">
|
||
<div class="card-header bg-danger text-white">
|
||
✘ Słabo
|
||
</div>
|
||
<div class="card-body">
|
||
<fieldset class="p-2">
|
||
<label><strong>Płeć:</strong></label>
|
||
<div class="form-check">
|
||
<label class="form-check-label">
|
||
<input type="radio" class="form-check-input" name="optionsRadios" value="option1">
|
||
Mężczyzna
|
||
</label>
|
||
</div>
|
||
<div class="form-check">
|
||
<label class="form-check-label">
|
||
<input type="radio" class="form-check-input" name="optionsRadios" value="option1">
|
||
Kobieta
|
||
</label>
|
||
</div>
|
||
<div class="form-check">
|
||
<label class="form-check-label">
|
||
<input type="radio" class="form-check-input" name="optionsRadios" value="option1">
|
||
Inna
|
||
</label>
|
||
</div>
|
||
</fieldset>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-lg-4 mb-4">
|
||
<div class="card">
|
||
<div class="card-header bg-danger text-white">
|
||
✘ Słabo
|
||
</div>
|
||
<div class="card-body">
|
||
<fieldset class="p-2">
|
||
<label><strong>Płeć:</strong></label>
|
||
<div class="form-check">
|
||
<label class="form-check-label">
|
||
<input type="radio" class="form-check-input" name="optionsRadios" value="option1">
|
||
Mężczyzna
|
||
</label>
|
||
</div>
|
||
<div class="form-check">
|
||
<label class="form-check-label">
|
||
<input type="radio" class="form-check-input" name="optionsRadios" value="option1">
|
||
Kobieta
|
||
</label>
|
||
</div>
|
||
<div class="form-check">
|
||
<label class="form-check-label">
|
||
<input type="radio" class="form-check-input" name="optionsRadios" value="option1">
|
||
Wolę nie odpowiadać
|
||
</label>
|
||
</div>
|
||
</fieldset>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-lg-4 mb-4">
|
||
<div class="card">
|
||
<div class="card-header bg-success text-white">
|
||
✓ Dobrze
|
||
</div>
|
||
<div class="card-body">
|
||
<fieldset class="p-2">
|
||
<label><strong>Płeć:</strong></label>
|
||
<div class="form-check">
|
||
<label class="form-check-label">
|
||
<input type="radio" class="form-check-input" name="optionsRadios" value="option1">
|
||
Mężczyzna
|
||
</label>
|
||
</div>
|
||
<div class="form-check">
|
||
<label class="form-check-label">
|
||
<input type="radio" class="form-check-input" name="optionsRadios" value="option1">
|
||
Kobieta
|
||
</label>
|
||
</div>
|
||
<div class="form-check">
|
||
<label class="form-check-label">
|
||
<input type="radio" class="form-check-input" name="optionsRadios" value="option1">
|
||
Osoba niebinarna
|
||
</label>
|
||
</div>
|
||
<div class="form-check">
|
||
<label class="form-check-label">
|
||
<input type="radio" class="form-check-input" name="optionsRadios" value="option1">
|
||
Żadna z powyższych:
|
||
<input type="text" class="form-control"/>
|
||
</label>
|
||
</div>
|
||
<div class="form-check">
|
||
<label class="form-check-label">
|
||
<input type="radio" class="form-check-input" name="optionsRadios" value="option1">
|
||
Wolę nie odpowiadać
|
||
</label>
|
||
</div>
|
||
</fieldset>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<h2>O krok dalej – wielokrotny wybór, losowa kolejność</h2>
|
||
<div class="row">
|
||
<div class="col-lg-4 mb-4">
|
||
<div class="card">
|
||
<div class="card-header bg-success text-white">
|
||
✓ Jeszcze lepiej
|
||
</div>
|
||
<div class="card-body">
|
||
<fieldset class="p-2">
|
||
<label><strong>Płeć:</strong></label>
|
||
<div class="form-check">
|
||
<label class="form-check-label">
|
||
<input type="checkbox" class="form-check-input" name="optionsRadios" value="option1">
|
||
Mężczyzna
|
||
</label>
|
||
</div>
|
||
<div class="form-check">
|
||
<label class="form-check-label">
|
||
<input type="checkbox" class="form-check-input" name="optionsRadios" value="option1">
|
||
Kobieta
|
||
</label>
|
||
</div>
|
||
<div class="form-check">
|
||
<label class="form-check-label">
|
||
<input type="checkbox" class="form-check-input" name="optionsRadios" value="option1">
|
||
Osoba niebinarna
|
||
</label>
|
||
</div>
|
||
<div class="form-check">
|
||
<label class="form-check-label">
|
||
<input type="checkbox" class="form-check-input" name="optionsRadios" value="option1">
|
||
Żadna z powyższych:
|
||
<input type="text" class="form-control"/>
|
||
</label>
|
||
</div>
|
||
</fieldset>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-lg-4 mb-4 mb-4">
|
||
<div class="card">
|
||
<div class="card-header bg-success text-white">
|
||
✓ Jeszcze lepiej
|
||
</div>
|
||
<div class="card-body">
|
||
<fieldset class="p-2">
|
||
<label><strong>Płeć:</strong></label>
|
||
<div class="form-check">
|
||
<label class="form-check-label">
|
||
<input type="checkbox" class="form-check-input" name="optionsRadios" value="option1">
|
||
Kobieta
|
||
</label>
|
||
</div>
|
||
<div class="form-check">
|
||
<label class="form-check-label">
|
||
<input type="checkbox" class="form-check-input" name="optionsRadios" value="option1">
|
||
Osoba niebinarna
|
||
</label>
|
||
</div>
|
||
<div class="form-check">
|
||
<label class="form-check-label">
|
||
<input type="checkbox" class="form-check-input" name="optionsRadios" value="option1">
|
||
Mężczyzna
|
||
</label>
|
||
</div>
|
||
<div class="form-check">
|
||
<label class="form-check-label">
|
||
<input type="checkbox" class="form-check-input" name="optionsRadios" value="option1">
|
||
Żadna z powyższych:
|
||
<input type="text" class="form-control"/>
|
||
</label>
|
||
</div>
|
||
</fieldset>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-lg-4 mb-4">
|
||
<div class="card">
|
||
<div class="card-header bg-success text-white">
|
||
✓ Najlepiej
|
||
</div>
|
||
<div class="card-body">
|
||
<fieldset class="p-2">
|
||
<label><strong>Płeć:</strong></label>
|
||
<p><small>
|
||
<i class="bi bi-info-circle"></i>
|
||
Potrzebujemy znać Twoją tożsamość płciową, by móc zbadać zależność między płcią osób respondenckich
|
||
a badanymi zmiennymi.
|
||
</small></p>
|
||
<div class="form-check">
|
||
<label class="form-check-label">
|
||
<input type="checkbox" class="form-check-input" name="optionsRadios" value="option1">
|
||
Kobieta
|
||
</label>
|
||
</div>
|
||
<div class="form-check">
|
||
<label class="form-check-label">
|
||
<input type="checkbox" class="form-check-input" name="optionsRadios" value="option1">
|
||
Osoba niebinarna
|
||
</label>
|
||
</div>
|
||
<div class="form-check">
|
||
<label class="form-check-label">
|
||
<input type="checkbox" class="form-check-input" name="optionsRadios" value="option1">
|
||
Mężczyzna
|
||
</label>
|
||
</div>
|
||
<div class="form-check">
|
||
<label class="form-check-label">
|
||
<input type="checkbox" class="form-check-input" name="optionsRadios" value="option1">
|
||
<input type="text" class="form-control"/>
|
||
</label>
|
||
</div>
|
||
</fieldset>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<h2>Płeć ≠ zaimki</h2>
|
||
<div class="row">
|
||
<div class="col-lg-6 mb-4">
|
||
<div class="card">
|
||
<div class="card-header bg-danger text-white">
|
||
✘ Źle
|
||
</div>
|
||
<div class="card-body">
|
||
<div class="form-group">
|
||
<label><strong>Nazwisko:</strong></label>
|
||
<input type="text" class="form-control" value="Nowak"/>
|
||
</div>
|
||
<fieldset class="p-2">
|
||
<label><strong>Płeć:</strong></label>
|
||
<div class="form-check">
|
||
<label class="form-check-label">
|
||
<input type="radio" class="form-check-input" name="optionsRadios2" value="option1">
|
||
Mężczyzna
|
||
</label>
|
||
</div>
|
||
<div class="form-check">
|
||
<label class="form-check-label">
|
||
<input type="radio" class="form-check-input" name="optionsRadios2" value="option1" checked>
|
||
Kobieta
|
||
</label>
|
||
</div>
|
||
<div class="form-check">
|
||
<label class="form-check-label">
|
||
<input type="radio" class="form-check-input" name="optionsRadios" value="option1">
|
||
Osoba niebinarna
|
||
</label>
|
||
</div>
|
||
<div class="form-check">
|
||
<label class="form-check-label">
|
||
<input type="radio" class="form-check-input" name="optionsRadios" value="option1">
|
||
Żadna z powyższych:
|
||
<input type="text" class="form-control"/>
|
||
</label>
|
||
</div>
|
||
</fieldset>
|
||
<p class="h2 text-center">…</p>
|
||
<p class="text-muted">(później wysłany na podstawie tych danych email)</p>
|
||
<p>Szanowna Pani Nowak!</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-lg-6 mb-4">
|
||
<div class="card">
|
||
<div class="card-header bg-success text-white">
|
||
✓ Dobrze
|
||
</div>
|
||
<div class="card-body">
|
||
<div class="form-group">
|
||
<label><strong>Nazwisko:</strong></label>
|
||
<input type="text" class="form-control" value="Nowak"/>
|
||
</div>
|
||
<fieldset class="p-2">
|
||
<label><strong>Zwrot grzecznościowy:</strong></label>
|
||
<div class="form-check">
|
||
<label class="form-check-label">
|
||
<input type="radio" class="form-check-input" name="optionsRadios3" value="option1">
|
||
Pan
|
||
</label>
|
||
</div>
|
||
<div class="form-check">
|
||
<label class="form-check-label">
|
||
<input type="radio" class="form-check-input" name="optionsRadios3" value="option1" checked>
|
||
Pani
|
||
</label>
|
||
</div>
|
||
<div class="form-check">
|
||
<label class="form-check-label">
|
||
<input type="radio" class="form-check-input" name="optionsRadios3" value="option1">
|
||
Państwo
|
||
</label>
|
||
</div>
|
||
<div class="form-check">
|
||
<label class="form-check-label">
|
||
<input type="radio" class="form-check-input" name="optionsRadios3" value="option1">
|
||
Pań
|
||
</label>
|
||
</div>
|
||
<div class="form-check">
|
||
<label class="form-check-label">
|
||
<input type="radio" class="form-check-input" name="optionsRadios3" value="option1">
|
||
Panu
|
||
</label>
|
||
</div>
|
||
<div class="form-check">
|
||
<label class="form-check-label">
|
||
<input type="radio" class="form-check-input" name="optionsRadios3" value="option1">
|
||
Inny:
|
||
<input type="text" class="form-control"/>
|
||
</label>
|
||
</div>
|
||
</fieldset>
|
||
<p class="h2 text-center">…</p>
|
||
<p class="text-muted">(później wysłany na podstawie tych danych email)</p>
|
||
<p>Szanowna Pani Nowak!</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="row">
|
||
<div class="col-lg-4 mb-4">
|
||
<div class="card">
|
||
<div class="card-header bg-success text-white">
|
||
✓ Dobrze
|
||
</div>
|
||
<div class="card-body">
|
||
<fieldset class="p-2">
|
||
<label><strong>Zwrot grzecznościowy:</strong></label>
|
||
<div class="form-check">
|
||
<label class="form-check-label">
|
||
<input type="radio" class="form-check-input" name="optionsRadios" value="option1">
|
||
Państwo
|
||
</label>
|
||
</div>
|
||
<div class="form-check">
|
||
<label class="form-check-label">
|
||
<input type="radio" class="form-check-input" name="optionsRadios" value="option1">
|
||
Pani
|
||
</label>
|
||
</div>
|
||
<div class="form-check">
|
||
<label class="form-check-label">
|
||
<input type="radio" class="form-check-input" name="optionsRadios" value="option1">
|
||
Panu
|
||
</label>
|
||
</div>
|
||
<div class="form-check">
|
||
<label class="form-check-label">
|
||
<input type="radio" class="form-check-input" name="optionsRadios" value="option1">
|
||
Pan
|
||
</label>
|
||
</div>
|
||
<div class="form-check">
|
||
<label class="form-check-label">
|
||
<input type="radio" class="form-check-input" name="optionsRadios" value="option1">
|
||
Pań
|
||
</label>
|
||
</div>
|
||
<div class="form-check">
|
||
<label class="form-check-label">
|
||
<input type="radio" class="form-check-input" name="optionsRadios" value="option1">
|
||
per „Ty”
|
||
</label>
|
||
</div>
|
||
<div class="form-check">
|
||
<label class="form-check-label">
|
||
<input type="radio" class="form-check-input" name="optionsRadios" value="option1">
|
||
Żaden z powyższych:
|
||
<input type="text" class="form-control"/>
|
||
</label>
|
||
</div>
|
||
</fieldset>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-lg-4 mb-4">
|
||
<div class="card">
|
||
<div class="card-header bg-success text-white">
|
||
✓ Dobrze
|
||
</div>
|
||
<div class="card-body">
|
||
<fieldset class="p-2">
|
||
<label><strong>Jak mamy się do Ciebie zwracać?</strong></label>
|
||
<p><small>
|
||
<i class="bi bi-info-circle"></i>
|
||
Więcej informacji znadziesz na stronie <a href="#" style="text-decoration: underline">zaimki.pl</a>
|
||
</small></p>
|
||
<div class="form-check">
|
||
<label class="form-check-label">
|
||
<input type="radio" class="form-check-input" name="optionsRadios" value="option1">
|
||
ono/jego <small class="text-muted">(np. zrobiłoś, poszłoś)</small>
|
||
</label>
|
||
</div>
|
||
<div class="form-check">
|
||
<label class="form-check-label">
|
||
<input type="radio" class="form-check-input" name="optionsRadios" value="option1">
|
||
on/jego <small class="text-muted">(np. zrobiłeś, poszedłeś)</small>
|
||
</label>
|
||
</div>
|
||
<div class="form-check">
|
||
<label class="form-check-label">
|
||
<input type="radio" class="form-check-input" name="optionsRadios" value="option1">
|
||
onu/jenu <small class="text-muted">(np. zrobiłuś, poszłuś)</small>
|
||
</label>
|
||
</div>
|
||
<div class="form-check">
|
||
<label class="form-check-label">
|
||
<input type="radio" class="form-check-input" name="optionsRadios" value="option1">
|
||
ona/jej <small class="text-muted">(np. zrobiłaś, poszłaś)</small>
|
||
</label>
|
||
</div>
|
||
<div class="form-check">
|
||
<label class="form-check-label">
|
||
<input type="radio" class="form-check-input" name="optionsRadios" value="option1">
|
||
oni/ich <small class="text-muted">(np. zrobiliście, poszliście)</small>
|
||
</label>
|
||
</div>
|
||
<div class="form-check">
|
||
<label class="form-check-label">
|
||
<input type="radio" class="form-check-input" name="optionsRadios" value="option1">
|
||
Żadna z powyższych:
|
||
<input type="text" class="form-control"/>
|
||
</label>
|
||
</div>
|
||
</fieldset>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</body>
|
||
</html>
|