Как я могу увеличить количество очков на событии onclick, используя js?

Question

Как я могу увеличить количество очков на событии onclick, используя js?

0

Я создаю викторину с двумя вариантами ответа на вопросы: прокручивание (справа или слева) или щелчок (сердце или перечеркнутый).

У меня есть функциональность салфетки, работающая и правильно подсчитанная оценка, но у меня возникли проблемы с получением события click для запуска аргумента, который вычисляет, был ли ответ верным или нет.

Мой HTML выглядит так:

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">

  <title>Quiz</title>
    <link rel="stylesheet" href="css/style.css">
    <link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
    <script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
    <script src="http://code.ionicframework.com/collide/0.0.4/collide.js"></script>
    <script src="http://www.loringdodge.com/files/ionic.tdcards2.js"></script>
</head>

<body ng-app="starter" no-scroll>
    <ion-pane ng-controller="CardsCtrl" class="background-grey">
      <ion-header-bar class="bar-default">
        <h1 class="title">Quiz</h1>
      </ion-header-bar>

      <div class="td-title">
        <div class="row">
          <div class="col">Master: <span>{{ cards.master.length }}</span></div>
              <p style="color:blue;"><strong>Points</strong> : <span>{{points}}</span></p>
          <div class="col">Bands: <span>{{ cards.active.length }}</span></div>
          <div class="col">Discards: <span>{{ cards.discards.length }}</span></div>
        </div>
        <div class="row">
          <div class="col">Liked: <span>{{ cards.liked.length }}</span></div>
          <div class="col">Disliked: <span>{{ cards.disliked.length }}</span></div>
        </div>
      </div>

      <h2 id="family-zone">SWIPE RIGHT<br>FOR FAMILY</h2>
      <h2 id="not-family-zone">SWIPE LEFT<br>FOR NOT FAMILY</h2>


      <!-- *************************
        TD Cards
        - We start off with an ng-if so that the cards are not generated
          unless $scope.cards is not 'null'
      ************************* -->
      <div ng-if="cards.active">
        <td-cards>
          <td-card ng-repeat="card in cards.active" on-destroy="cardDestroyed($index)" on-swipe-left="cardSwipedLeft($index)" on-swipe-right="cardSwipedRight($index)">
            <div class="image" ng-controller="CardCtrl">
              <div class="no-text" ng-click="onClickTransitionOut(card)($index)" ng-click="onClickNotFamily(card)($index)"></div>
              <div class="yes-text" ng-click="onClickTransitionOut(card)($index)" ng-click="onClickFamily(card)($index)"></div>

              <!-- *************************
                Discard
                - The card is removed from the deck and a fly away animation is triggered.
                - onClickTransitionOut is found in ionic.tdcards.js
                - Animation can be customized by changing defaults
              ************************* -->

              <img ng-src="{{ card.image }}">
            </div>
          </td-card>
          <!-- *************************
            End Card
            - 'drag' is set to false. The user cannot drag it.
            - 'refreshCards()' reloads all cards that have NOT been discarded.
          ************************* -->
          <td-card id="end-card" drag="false">
          <h2 id="share">SHARE ON FACEBOOK</h2>
           <!--  <i class="icon ion-ios-refresh disable-user-behavior" ng-click="refreshCards()"></i> -->
          </td-card>
        </td-cards>
      </div>


    </ion-pane>
  </body>

И мой Javascript в настоящее время выглядит так:

 <script type="text/javascript">

        angular.module('starter', ['ionic', 'ionic.contrib.ui.tinderCards2'])


.config(function($stateProvider, $urlRouterProvider) {

})

.directive('noScroll', function($document) {

  return {
    restrict: 'A',
    link: function($scope, $element, $attr) {

      $document.on('touchmove', function(e) {
        e.preventDefault();
      });
    }
  }
})

.controller('CardsCtrl', function($scope, TDCardDelegate, $timeout) {

  var cardTypes = [

  { 
    "image": 'http://classicsdujour.com/wp2015/wp-content/uploads/2015/01/Van-Halen-Deluxe-Cover.jpg',
    "question" : "Q: This question is true",
    "valid"    : 1, // indicates the correct array number, use 0, 1...
    "buttons"  : ["False", "True"],
    "answers"  : [ "The correct answer is True"]  
  },
  {
    "image": 'https://www.dustygroove.com/images/products/j/jackson5~~~_abc180gra_101b.jpg',
    "question" : "Q: This answer to this question is true",
    "valid"    : 1,
    "buttons"  : ["False", "True"],
    "answers"  : [ "The correct answer is True"] 
  },
  {
    "image": 'https://fanart.tv/fanart/music/9beb62b2-88db-4cea-801e-162cd344ee53/albumcover/solid-gold-hits-504adea20593c.jpg',
    "question" : "Q: This question is false",
    "valid"    : 0, 
    "buttons"  : ["False", "True"],
   "answers"  : [ "The correct answer is False"] 
  },
    {
    "image": 'http://cdn.therockcorner.com/artists/k/kings-of-leon/albums/youth-and-young-manhood-5.jpg',
    "question" : "Q: The answer to this question is truuueee",
    "valid"    : 1,
    "buttons"  : ["False", "True"],
    "answers"  : [ "The correct answer is True"] 
  },
    {
    "image": 'https://analogkidblog.files.wordpress.com/2015/06/the-family-320-kbps.png',
    "question" : "Q: False is the answer here",
    "valid"    : 0,
    "buttons"  : ["False", "True"],
    "answers"  : [ "The correct answer is false"] 
  },
    {
    "image": 'https://upload.wikimedia.org/wikipedia/en/1/1c/SoundsSilence.jpg',
    "question" : "Q: This questions is false",
    "valid"    : 0,
    "buttons"  : ["False", "True"],
    "answers"  : [ "The correct answer is False"] 
  },
    {
    "image": 'http://static1.squarespace.com/static/5073209bc4aa6253939f5db3/t/5715299c40261d3e0a616695/1461004706936/?format=500w',
    "question" : "Q: True True Truueee",
    "valid"    : 1,
    "buttons"  : ["False", "True"],
    "answers"  : [ "The correct answer is True"] 
  },
    {
    "image": 'https://upload.wikimedia.org/wikipedia/en/a/ae/Daft_Punk_-_Discovery.jpg',
    "question" : "Q: This one is indeed false",
    "valid"    : 0,
    "buttons"  : ["False", "True"],
    "answers"  : [ "The correct answer is False"] 
  },
      {
    "image": 'http://66.media.tumblr.com/tumblr_lidp3btJqJ1qzk6vno1_1280.jpg',
    "question" : "Q:  Ahaaaa a true question",
    "valid"    : 1,
    "buttons"  : ["False", "True"],
    "answers"  : [ "The correct answer is True"] 
  },
    {
    "image": 'https://upload.wikimedia.org/wikipedia/en/2/20/Arcticmonkeys-humbug.jpg',
    "question" : "Q: Another false statement",
    "valid"    : 0,
    "buttons"  : ["False", "True"],
    "answers"  : [ "The correct answer is False"] 
  },
      //{
    //"question" : "Game over, check your score below.",

  //}

];

var qc        = 0, // Current Question counter
    points    = 0, // Current points
    validIdx = cardTypes.valid,
    $points   = ("p>span");


  $scope.cards = {
    master: Array.prototype.slice.call(cardTypes, 0),
    active: Array.prototype.slice.call(cardTypes, 0),
    discards: [],
    liked: [],
    disliked: []

  }

  $scope.points = 0;

  $scope.cardDestroyed = function(index) {
    $scope.cards.active.splice(index, 1);
  };

  $scope.addCard = function() {
    var newCard = cardTypes[0];
    $scope.cards.active.push(angular.extend({}, newCard));
  }

  $scope.refreshCards = function() {
    // Set $scope.cards to null so that directive reloads
    $scope.cards.active = null;
    $timeout(function() {
      $scope.cards.active = Array.prototype.slice.call($scope.cards.master, 0);
    });
    $scope.points = 0;
  }

  $scope.$on('removeCard', function(event, element, card) {
    var discarded = $scope.cards.master.splice($scope.cards.master.indexOf(card), 1);
    $scope.cards.discards.push(discarded);
  });

  $scope.cardSwipedLeft = function(index) {
    console.log('LEFT SWIPE');
    var card = $scope.cards.active[index];
    $scope.cards.disliked.push(card);

    var givenAnswer = 0,
    correctAnswer = card.valid;  
  if (givenAnswer === correctAnswer) {
    console.log('correct!!!!');            
  } else {
    console.log('incorrect!!!!');                       
  }
//increment the points variable if the answer is correct:

if (givenAnswer === correctAnswer) {
    console.log('correct!!!!');
    $scope.points++;             
} 
  };

  $scope.cardSwipedRight = function(index) {
    console.log('RIGHT SWIPE');
    var card = $scope.cards.active[index];
    $scope.cards.liked.push(card);

   var givenAnswer = 1,
    correctAnswer = card.valid;  
  if (givenAnswer === correctAnswer) {
    console.log('correct!!!!');            
  } else {
    console.log('incorrect!!!!');                       
  }
//increment the points variable if the answer is correct:
if (givenAnswer === correctAnswer) {
    console.log('correct!!!!');
    $scope.points++;             
} 

  };

  $scope.onClickNotFamily = function(index) {
    console.log('LEFT CLICK');

    var givenAnswer = 0,
    correctAnswer = card.valid;  
    if (givenAnswer === correctAnswer) {
    console.log('correct!!!!');            
    } else {
    console.log('incorrect!!!!');                       
    }
    //increment the points variable if the answer is correct:

    if (givenAnswer === correctAnswer) {
    console.log('correct!!!!');
    $scope.points++;             
    } 

  };

  $scope.onClickFamily = function(index) {
    console.log('RIGHT CLICK');
    var card = $scope.cards.active[index];
    $scope.cards.liked.push(card);

   var givenAnswer = 1,
    correctAnswer = card.valid;  
  if (givenAnswer === correctAnswer) {
    console.log('correct!!!!');            
  } else {
    console.log('incorrect!!!!');                       
  }
//increment the points variable if the answer is correct:
if (givenAnswer === correctAnswer) {
    console.log('correct!!!!');
    $scope.points++;             
} 

  };


})




.controller('CardCtrl', function($scope, TDCardDelegate) {

});





        </script>

Я просто хочу, чтобы событие click запускало аргумент, чтобы определить, был ли ответ верным или нет.

Нынешний фрагмент скрипта, который запускает этот аргумент, когда пользователь перебирает правую, выглядит так:

$scope.cardSwipedRight = function(index) {
    console.log('RIGHT SWIPE');
    var card = $scope.cards.active[index];
    $scope.cards.liked.push(card);

   var givenAnswer = 1,
    correctAnswer = card.valid;  
  if (givenAnswer === correctAnswer) {
    console.log('correct!!!!');            
  } else {
    console.log('incorrect!!!!');                       
  }
//increment the points variable if the answer is correct:
if (givenAnswer === correctAnswer) {
    console.log('correct!!!!');
    $scope.points++;             
} 

  };

sandman human man 05 сен. 2016, в 18:17

Источник

0

Ваш код немного длинный ... можно ли его немного свести?
Winter 05 сен. 2016, в 16:54

Теги:

javascript

html

ionic-framework

angularjs

css

1 ответ

Ещё вопросы

Ваш код немного длинный ... можно ли его немного свести?

Ollin Boer Bohan · Answer 1 · 2016-09-05T16-40-00.000Z

Из спецификации HTML:

Когда пользовательский агент покидает состояние имени атрибута (и перед выпуском маркера тега, если это необходимо), полное имя атрибута должно сравниваться с другими атрибутами на одном и том же токене; если уже есть атрибут на токене с точно таким же именем, то это ошибка синтаксического анализа, и новый атрибут должен быть удален из токена.

Значение, когда вы пишете:

<div class="no-text" ng-click="onClickTransitionOut(card)($index)" ng-click="onClickNotFamily(card)($index)"></div>

Первый атрибут ng-click (onClickTransitionOut...) назначается, а второй (onClickNotFamily) отбрасывается, потому что уже существует значение для ng-click. Таким образом, только первая функция будет запущена при нажатии.

Вот два варианта решения этой проблемы, чтобы обе функции выполнялись:

Реструктурируйте свой код, чтобы была единственная функция, которую вы можете привязать к ng-click. Я бы рекомендовал это, так как у вашего JS, похоже, есть код для копирования/вставки кода между обработчиками щелчков и салфетки.
Объедините атрибуты ng-click для ng-click="function1(); function2()" (как в этом сообщении).

Надеюсь, это поможет! Я не эксперт по углам, поэтому могут быть другие проблемы, которые я не заметил.