从swal库中增加文本元素

Question

我正试图通过增加Swal库中的'text'属性来记录右侧丢弃的相应拖动元素的数量，即(text:'RICHTIG！'(。因为这是我对alert("right！"(的替代；本质上，我想用它实现的是，每次触发警报消息时都增加警报消息，并显示其分数。然而，我是编程新手，尽管我已经想好了在代码中到底在哪里更改它，但问题是我不知道如何在递增函数的if语句中很好地定义Swal中的"text"属性。

function startTimer(duration,display){
var timer = duration,seconds;
setInterval(function(){
minutes = parseInt(timer / 60, 10);
seconds = parseInt(timer % 60, 10);
minutes = minutes < 10 ? "0" + minutes : minutes;
seconds = seconds < 10 ? "0" + seconds : seconds;
display.textContent = minutes + ":" + seconds;
if(--timer < 0){
timer = duration-1;
clearInterval(timer);
alert('Erneuert Versuchen!')
}
}, 2000);
}
window.onload = function () {
var thirtySeconds = 60 / 2,
display = document.querySelector('#time');
startTimer(thirtySeconds,display);
};
var makeUnselectable = function($target){
$target
.addClass('unselectable')
.attr('unselectable,on')
.attr('draggable','false')
.on('dragstart', function(){return false;});
$target
.find('*')
.attr('draggable','false')
.attr('unselectable','on');
};
var dragged;
function allowDrop(event) {}
/* events fired on the draggable target */
function drag(event) {
}
document.addEventListener("dragstart", function(event) {
// store a ref. on the dragged elem
dragged = event.target;
// make it half transparent
event.target.style.opacity = 0.5;
}, false);
document.addEventListener("dragend", function(event) {
// reset the transparency
event.target.style.opacity = "";
}, false);
/* events fired on the drop targets */
document.addEventListener("dragover", function(event) {
// prevent default to allow drop
event.preventDefault();
}, false);
document.addEventListener("dragenter", function(event) {
// highlight potential drop target when the draggable element enters it
if (event.target.className == "dropzone") {
event.target.style.background = "purple";
}
}, false);
document.addEventListener("dragleave", function(event) {
// reset background of potential drop target when the draggable element leaves it
if (event.target.className == "dropzone") {
event.target.style.background = "";
}
console.log('test');
}, false);
gameScore = document.getElementById('gameScore');
function drop(event) {

// prevent default action (open as link for some elements)
event.preventDefault();
// move dragged elem to the selected drop target
//check if the target is dropzone and dragged element have the required group value if yes allow append child else dont do anything just reset color and opacity
debugger;
if (event.target.className == "dropzone" && dragged.attributes.group.value == event.target.attributes.group.value) {
event.target.style.background = "";
dragged.parentNode.removeChild(dragged);
event.target.appendChild(dragged);
//console.log('test');
swal({
text: 'RICHTIG!',
timer: 2000,
buttons: false,
}).then(
function increase() {
if (text === 'RICHTIG!'){
score = document.getElementById("kategorie").childNodes.length;
gameScore.innerHTML = score; 
}
},
//handling the promise rejection
function (dismiss){
if (dismiss === 'timer'){
//console.log('I was closed by the timer')
}
}
)
} else {
if (event.target.className == "dropzone") {
event.target.style.background = "";
}
dragged.style.opacity = 0.5;
//alert('please drop the item to section : '+dragged.attributes.group.value)
swal({
text: 'FALSCH!',
timer: 2000,
buttons: false,
}).then(
function () {},
//handling the promise rejection
function (dismiss){
if (dismiss === 'timer'){
//console.log('I was closed by the timer')
}
}
)
}
}

HTML

<div id="kategorie">
<img class="pfeil" draggable="false" src="img/pfeil_breiter-01-01.png" alt="pfeil">
<img class="dropzone" group="1" id="kategorie1" draggable="false" ondrop="drop(event)" ondragover="allowDrop(event)" src="img/kategorie1.jpg" alt="kategorie1">

<img class="dropzone" group="2" id="kategorie2" draggable="false" ondrop="drop(event)" ondragover="allowDrop(event)" src="img/kategorie2.jpg" alt="kategorie2"> 

<img class="dropzone" group="3" id="kategorie3" draggable="false" ondrop="drop(event)" ondragover="allowDrop(event)" src="img/kategorie3.jpg" alt="kategorie3"> 
</div>
<div class="kasten" id="effekte">
<div class="b-line" id="texte1" group="2" draggable="true" ondragstart="drag(event)">Mitläufereffekt</div>
<div class="b-line" id="texte2" group="2" draggable="true" ondragstart="drag(event)">Falsche Mehrheit</div>
<div class="b-line" id="texte3" group="2" draggable="true" ondragstart="drag(event)">Pluralistische Ignoranz</div>
<div class="b-line" id="texte4" group="1" draggable="true" ondragstart="drag(event)">Bestätigungsfehler</div>
<div class="b-line" id="texte5" group="1" draggable="true" ondragstart="drag(event)">Survivorship Bias</div>
<div class="b-line" id="texte6" group="1" draggable="true" ondragstart="drag(event)">Verfügbarkeitsheuristik</div>
<div class="b-line" id="texte7" group="1" draggable="true" ondragstart="drag(event)">Schuss-geht-noch-hinten-los-Effekt</div>
<div class="b-line" id="texte8" group="1" draggable="true" ondragstart="drag(event)">Dunning-Kruger-Effekt</div>
<div class="b-line" id="texte9" group="1" draggable="true" ondragstart="drag(event)">Fluch des Wissens</div>
<div class="b-line" id="texte10" group="3" draggable="true" ondragstart="drag(event)">Optimismusfehler</div>
<div class="b-line" id="texte11" group="3" draggable="true" ondragstart="drag(event)">Reaktanz</div>
<div class="b-line" id="texte12" group="3" draggable="true" ondragstart="drag(event)">Zuschauereffekt</div>
<div class="b-line" id="texte13" group="3" draggable="true" ondragstart="drag(event)">Ausgleichheuristik</div>
<div class="b-line" id="texte14" group="3" draggable="true" ondragstart="drag(event)">Verlust-Aversion</div>
<div class="b-line" id="texte15" group="" draggable="true" ondragstart="drag(event)">der Gesunde-Arbeiter-Effekt</div>
</div>

Answer 1

所以我找到了一种从SWAL库中增加文本警报的方法。从而还登记了拖放的正确答案的数量。下面是整个javascript代码。

var score = 0;
function startTimer(duration,display){
var timer = duration,seconds;
setInterval(function(){
minutes = parseInt(timer / 60, 10);
seconds = parseInt(timer % 60, 10);
minutes = minutes < 10 ? "0" + minutes : minutes;
seconds = seconds < 10 ? "0" + seconds : seconds;
display.textContent = minutes + ":" + seconds;
if(--timer < 0){
timer = duration-1;
clearInterval(timer);
alert('Erneuert Versuchen!')
}
}, 2000);
}
window.onload = function () {
var thirtySeconds = 60 / 2,
display = document.querySelector('#time');
startTimer(thirtySeconds,display);
};
var makeUnselectable = function($target){
$target
.addClass('unselectable')
.attr('unselectable,on')
.attr('draggable','false')
.on('dragstart', function(){return false;});
$target
.find('*')
.attr('draggable','false')
.attr('unselectable','on');
};
var dragged;
function allowDrop(event) {}
/* events fired on the draggable target */
function drag(event) {
}
document.addEventListener("dragstart", function(event) {
// store a ref. on the dragged elem
dragged = event.target;
// make it half transparent
event.target.style.opacity = 0.5;
}, false);
document.addEventListener("dragend", function(event) {
// reset the transparency
event.target.style.opacity = "";
}, false);
/* events fired on the drop targets */
document.addEventListener("dragover", function(event) {
// prevent default to allow drop
event.preventDefault();
}, false);
document.addEventListener("dragenter", function(event) {
// highlight potential drop target when the draggable element enters it
if (event.target.className == "dropzone") {
event.target.style.background = "purple";
}
}, false);
document.addEventListener("dragleave", function(event) {
// reset background of potential drop target when the draggable element leaves it
if (event.target.className == "dropzone") {
event.target.style.background = "";
}
console.log('test');
}, false);
// gameScore = document.getElementById('gameScore');
gameScore = document.getElementById('score');

function drop(event) {

// prevent default action (open as link for some elements)
event.preventDefault();
// move dragged elem to the selected drop target
//check if the target is dropzone and dragged element have the required group value if yes allow append child else dont do anything just reset color and opacity
debugger;
if (event.target.className == "dropzone" && dragged.attributes.group.value == event.target.attributes.group.value) {
event.target.style.background = "";
dragged.parentNode.removeChild(dragged);
event.target.appendChild(dragged);
// score hoch zaehlen:
score ++;
document.getElementById('score').innerHTML= score;
//
//console.log('test');
swal({
text: 'RICHTIG!',
timer: 2000,
buttons: false,
}).then(
function increase() {

},
//handling the promise rejection
function (dismiss){
if (dismiss === 'timer'){
//console.log('I was closed by the timer')
}
}
)
} else {
if (event.target.className == "dropzone") {
event.target.style.background = "";
}
dragged.style.opacity = 0.5;
//alert('please drop the item to section : '+dragged.attributes.group.value)
swal({
text: 'FALSCH!',
timer: 2000,
buttons: false,
}).then(
function () {},
//handling the promise rejection
function (dismiss){
if (dismiss === 'timer'){
//console.log('I was closed by the timer')
}
}
)
}
}