Skip to content

Commit

Permalink
feat(pollinators): add wetland pollinator quiz
Browse files Browse the repository at this point in the history
  • Loading branch information
larsgw committed May 14, 2024
1 parent aff3562 commit daa234d
Show file tree
Hide file tree
Showing 2 changed files with 472 additions and 0 deletions.
99 changes: 99 additions & 0 deletions wetland-pollinators/index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,99 @@
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Wetland pollinator quiz</title>
<meta name="description" content="Match iNaturalist pictures to pollinator species">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="../index.css">
<link rel="stylesheet" href="../inat/index.css">
<style>
@media (min-width: 800px) {
body {
display: grid;
grid-template-areas: "header quiz" "answers quiz";
grid-template-columns: 1fr 1fr;
grid-template-rows: auto 1fr;
grid-gap: 1em;
height: 100vh;
max-width: none;
overflow: hidden;
}
header {
grid-area: header;
}
#selection {
align-items: flex-start;
display: flex;
flex-direction: column;
grid-area: quiz;
margin-top: 2em;
overflow-y: auto;
}
#guess {
grid-area: answers;
overflow-y: auto;
}
#guess button[type="submit"] {
float: right;
}
#guess button[type="button"] {
float: none;
}
}

fieldset details {
clear: left;
float: left;
padding-left: 2em;
}

fieldset details summary {
margin-left: -2em;
}

fieldset details input[type="radio"],
fieldset details input[type="checkbox"] {
margin-left: 0;
}
</style>
</head>
<body>
<header>
<h1>Wetland pollinator quiz</h1>
<p>Do your best to recognize these wetland pollinators!</p>
<p>
<a href="https://github.com/larsgw/biodiversity-matcher">Source code</a>
·
<a href="https://github.com/larsgw/biodiversity-matcher/blob/master/LICENSE">License</a>
·
<a href="https://github.com/larsgw/biodiversity-matcher/issues">Feedback</a>
</p>
<hr>
</header>

<form id="selection">
<details>
<summary>Include/exclude species</summary>
<fieldset id="taxaSelect">
</fieldset>
</details>

<button type="submit">Next picture</button>

<output name="images"></output>
</form>

<form id="guess">
<output name="result"></output>

<button type="submit">Guess</button>
<button id="giveup" type="button">Give up</button>

<fieldset id="taxaGuess">
</fieldset>
</form>

<script src="index.js" charset="utf-8"></script>
</body>
</html>
Loading

0 comments on commit daa234d

Please sign in to comment.