关于树的问答测试小应用 - 踏得网

根据树和树叶的描述，给出树种的答案。

tree,leave

《three.js如何实现贴图模糊效果 - 使用canvas》申请公开！

第三方库
作品简介 1635
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

var currentquestion = 0;
var options = [
  ["Trees with needles or scale-like leaves",
   "Trees with broadleaf leaves"],
  
  ["Leaves are solitary needles",
   "Leaves like scales"],
  
  ["Leaves compound",
   "Leaves simple"],
  
  ["Leaves opposite",
   "Leaves alternate"],
  
  ["Usually 3 leaflets, pinnately compund",
   "More than 3 leaflets"],
  
  ["7-9 leaflets, pinnately compound, pale / whiteish undersurface",
   "5-9 leaflets, pinnately compound, square petiole.",
   "5-9 leaflets, wide in center and taper to narrow end"],
   
  ["5 leaflets fringed with minute tufts of white hair on serrations",
   "7-9 leaflets, relatively narrow, long pointed & finely serrated",
   "18+ leaflets, 2-4 cm long, no end leaflets"],
   
  ["Tree branches with thorns",
   "Tree branches without thorns"],
   
  ["Leaves lobed",
   "Leaves not lobed",
   "Some leaves (younger growth) lobed, others not (mixed)"],
   
  ["Leaf with palmate venation",
   "Leaf with pinnate venation"],
   
  ["Lobed leaves with dentate margins",
   "Lobed leaf margins, not denate"],
   
  ["5 lobes, sharply serrate, sinuses extending nearly to the midrib, silvery-white lower surface",
   "3-5 lobes, serrate margins, sinuses not deep, twigs lustrous red"],
   
  ["5 lobes, sinuses rounded, midrib lobe has drooping sides",
   "5 lobes, midrib lobe is almost square with nearly parallel sides",
   "Largest of Maple leaves, darker green with 5 lobes, petioles exude milky sap when cut"],
   
  ["Relatively small (7-13 cm long) leaves with 5-7 bristle-sipped lobes and deep sinuses",
   "Blades 10-20 cm long, usually 7 brittle-tipped lobes, shaded leaves have shallow sinuses"],
   
  ["Leaf with dentate margins",
   "Leaf margins not dentate"],
   
  ["Leaf oblong with thickest diameter near end",
   "Leaf ovate to elliptical, entire or wavy-toothed with a distinct sharp tip"],
   
  ["Leaf fine toothed serrations on margin",
   "Serrations of margin are coarse, large, very noticeable; possibly doubly serrate"],
   
  ["Leaf heart-shaped with hairs on vein axils",
   "Leaf not heart-shaped"],
   
  ["Leaves matte green, approximately 20cm long, 15 cm across, that taper to a fine tip",
   "Leaves blue green, approximately 7.5 cm long and across that taper to a fine tip"],
   
  ["Base of leaf asymmetrical, double serrate margin, thick and rough leaf",
   "Base of leaf asymmetrical, leaf has curved in teeth and is a deep purple color"],
   
  ["Leaf lanceolate, 8-15 cm long, thing, pointed branches droop down toward the ground",
   "Leaves more oval, pointed"],
   
  ["Leaves 3 - 7 cm long, very fine serrations, whitish color on underside of leaf",
   "Leaves 5-8 cm long, 1/2 as wide, petioles have two red glands (growths) near blade",
   "Leaves 7-10 cm long, 1/2 as wide, sharply serrate, pubescent midrib"]
];
var tree = [
  [2,3],
  [23,24],
  [4,8],
  [5,7],
  [25,6],
  [26,27,28],
  [29,30,31],
  [32,9],
  [10,15,33],
  [11,14],
  [12,13],
  [34,35],
  [36,37,38],
  [39,40],
  [17,16],
  [41,42],
  [21,18],
  [19,20],
  [43,44],
  [45,46],
  [47,22],
  [48,49,50]
];
var answers = [
  "Blue Spruce",
  "Northern White Cedar",
  "Boxelder",
  "White Ash",
  "Blue Ash",
  "Green Ash",
  "Shagbark Hickory",
  "Bitternut Hickory",
  "Honey Locust",
  "Washington Hawthorne",
  "White Mulberry",
  "Silver Maple",
  "Red Maple",
  "Black Maple",
  "Sugar Maple",
  "Norway Maple",
  "Northern Pin Oak",
  "Black Oak",
  "Saucer Magnolia",
  "Dogwood",
  "American Basswood",
  "Little Leaf Linden",
  "American Elm",
  "Dawyck Purple Beech (Copper Beech)",
  "Black Willow",
  "Cherry Plum",
  "Common Cherry",
  "Juneberry"
];
function loadquestion(n) {
    if(n>21) {
      $("#answer").text(answers[n-22]);
      $("#answer").css("display", "block");
      $("ul").css("display", "none");
    } else {
      $("#option1").text(options[n][0]);
      $("#option2").text(options[n][1]);
      if(options[n][2] == undefined) {
          $("#option3").css("display","none");
      } else {
          $("#option3").text(options[n][2]);
          $("#option3").css("display","inline");
      }
    }
}
function start() {
    $("#start").css("display","none");
    $("ul").css("display","block");
    loadquestion(currentquestion);
}
function submit(n) {
  currentquestion = tree[currentquestion][n] - 1;
  loadquestion(currentquestion);
}

$.backstretch("http://images6.alphacoders.com/437/437350.jpg");

编译

CSS

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,700);
* {
  font-family: 'Open Sans', sans-serif; }

body {
  background: url(http://images6.alphacoders.com/437/437350.jpg); }

.outer {
  padding: 25px;
  width: 400px;
  height: 300px;
  margin-right: -230px;
  margin-top: -180px;
  background: rgba(0, 0, 0, 0.9);
  position: absolute;
  top: 50%;
  right: 50%;
  border-radius: 20px; }

.outer ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
  display: none;
  /* Will be shown by JS later... */ }

.outer ul li {
  list-style: none;
  margin: 0 0 10px 0;
  font-size: 16px;
  color: #aaa; }

.outer ul li a {
  color: white;
  font-size: 24px;
  text-decoration: none; }

#start {
  display: inline-block;
  color: white;
  text-decoration: none;
  font-size: 32px;
  border: 4px solid white;
  padding: 5px 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -67px;
  margin-top: -31px; }

#start:hover {
  background: white;
  color: black; }

#answer {
  display: none;
  text-align: center;
  font-size: 36px;
  color: white;
  margin-top: 120px; }

HTML