javascript - 在 JQuery 中动态创建闪存卡？

Question

是否可以使用以下 Fiddle，允许用户通过将数据输入 <input> 来动态创建闪存卡领域？

Fiddle

如果可能的话，如果可以提供一个新的 fiddle ，我将不胜感激，因为我是编码新手。

谢谢!

$(function(){
  var maxCards = $('.card').length;
  // turn card
  for (var i = 1; i <= maxCards; ++i) {
    $('._' + i).click(function(){
      $(this).addClass('flipped');
      $(this).find('.front').addClass('showingBack');
      $(this).find('.front').css("z-index", 0);
      $(this).css("z-index", i);
    });
  }
  // reset stack
  $('#reset button').click(function(){
    $('.card').removeClass('flipped');
    $('.card').find('.front').removeClass('showingBack');
    $('.card').find('.front').css("z-index", 2);
    for (var j = 0; j < maxCards; ++j) {
      $('.card:eq(' + j + ')').css("z-index", maxCards - j);
    }
  });
});




$(document).ready(function() {
    var max_fields      = 20; //maximum input boxes allowed
    var wrapper         = $(".input_fields_wrap"); //Fields wrapper
    var add_button      = $(".add_field_button"); //Add button ID
    
    var x = 1; //initlal text box count
    $(add_button).click(function(e){ //on add input button click
        e.preventDefault();
        if(x < max_fields){ //max input box allowed
            x++; //text box increment
            $(wrapper).append('<div><input placeholder="Question" type="text" name="mytext[]"/><input placeholder="Answer"  type="text" name="mytext[]"/><a href="#" class="remove_field">Remove</a></div>'); //add input box
        }
    });
    
    $(wrapper).on("click",".remove_field", function(e){ //user click on remove text
        e.preventDefault(); $(this).parent('div').remove(); x--;
    })
});

body {
  background: #ccc;
  font-family: Indie Flower, sans-serif;
}

#reset {
  text-align: center;
}
#reset button {
  background: rgba(0, 0, 0, 0.4);
  border: 0;
  color: white;
  font-size: 12pt;
  margin: auto;
  width: 120px;
  height: 30px;
}
#reset button:active {
  background: rgba(0, 0, 0, 0.8);
}

#stack {
  margin: auto;
  position: relative;
  width: 300px;
}

.card {
  border: 1px solid #888;
  position: absolute;
  width: 300px;
  height: 180px;
  transform-origin: 0% 0%;
}
.card .front {
  background: white;
  font-size: 24pt;
  position: absolute;
  width: 300px;
  height: 180px;
  z-index: 2;
}
.card .front p {
  line-height: 3em;
  text-align: center;
}
.card .back {
  background: white linear-gradient(transparent, transparent 20%, hotpink 20%, hotpink 21%, transparent 21%, transparent 31%, lightblue 31%, lightblue 32%, transparent 32%, transparent 42%, lightblue 42%, lightblue 43%, transparent 43%, transparent 53%, lightblue 53%, lightblue 54%, transparent 54%, transparent 64%, lightblue 64%, lightblue 65%, transparent 65%, transparent 75%, lightblue 75%, lightblue 76%, transparent 76%, transparent 86%, lightblue 86%, lightblue 87%, transparent 87%, transparent 97%);
  font-size: 11pt;
  position: absolute;
  width: 300px;
  height: 180px;
  transform: rotateY(180deg);
  z-index: 1;
}
.card .back p {
  margin: 40px 5px 5px 5px;
}

._1 {
  top: 0px;
  right: 0px;
  z-index: 3;
}

._2 {
  top: 3px;
  right: 2px;
  z-index: 2;
}

._3 {
  top: 6px;
  right: 4px;
  z-index: 1;
}

._4 {
  top: 9px;
  right: 6px;
  z-index: 0;
}

.flipped {
  transform: rotateY(180deg) translateX(30px);
  animation: flip 1s;
}

.showingBack {
  animation: showBack 1s;
}

@keyframes flip {
  from {
    transform: rotateY(0deg) translateX(0px);
  }
  to {
    transform: rotateY(180deg) translateX(30px);
  }
}
@keyframes showBack {
  0% {
    z-index: 2;
  }
  25% {
    z-index: 2;
  }
  50% {
    z-index: 0;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h2>
Import FlashCard Text Below:
</h2>

<div class="input_fields_wrap">
    <button class="add_field_button">Add More Flash Cards</button>
    <button>
    Create Flash Cards
    </button>
    <div><input placeholder="Question" type="text" name="mytext[]"><input placeholder="Answer" type="text" name="mytext[]"/></div>
</div>
<hr>

<p id='reset'>
  <button align="center">Reset stack</button>
</p>
<div id='stack'>
  <div class='card _1'>
    <div class='front'>
      <p>What is 1+3?</p>
    </div>
    <div class='back'>
      <p>4</p>
    </div>
  </div>
  <div class='card _2'>
    <div class='front'>
      <p>What is 2-1?</p>
    </div>
    <div class='back'>
      <p>1</p>
    </div>
  </div>
  <div class='card _3'>
    <div class='front'>
      <p>What is Pi?</p>
    </div>
    <div class='back'>
      <p>3.14...</p>
    </div>
  </div>
  <div class='card _4'>
    <div class='front'>
      <p>What is 1/2?</p>
    </div>
    <div class='back'>
      <p>0.5</p>
    </div>
  </div>
</div>

Answer 1

Here's a totally different way to create flash cards.

闪存卡内容进入谷歌驱动表。易于使用，易于更新。然后使用谷歌的API下载JSON格式的数据。

代码很简单，只需将此代码放在 html 文件的正文中即可。

<script src="https://spreadsheets.google.com/feeds/list/XXXXXXXX/od6/public/full?alt=json-in-script&amp;callback=useJSONdata"></script>

在您网站的脚本部分，您将拥有:

function useJSONdata(root) { 
    console.log(JSON.stringify(root, null, 4));
    // Understanding the object root is a great way to understand what is going on with JSON
    var entries = root.feed.entry || [];  .. etc. 

分析您需要的数据，运行 for 循环，创建要粘贴回文档对象模型/HTML/正文的内容字符串。

最后使用 jQuery 移动工具创建移动就绪应用程序。我同时使用了他们的 js 和 css 文件。很不错。我使用了三个移动事件“向左滑动”、“向右滑动”和“taphold”。向左滑动以转到下一张幻灯片。向右轻扫以转到上一张幻灯片。长按以显示问题的答案。

我意识到这并不是您想要的，虽然主动输入很好，但我认为用于一系列具有数据持久性(以及进行编辑的能力)的闪存卡的电子表格格式是非常好的方式去。