9-task

task.js

HtmlacademyTask.setup(function () {
  this.setView(HtmlCssView, function () {
    this.setSplitEditor('css');
  });
  this.setRunner(HtmlCssRunner);
  this.setChecker(HtmlCssChecker, function (checker) {
    checker.addGoal('goal1', function (dom) {
      dom.changeEtalon(function () {
        this.reset();
        this.css(function () {
          this.append('.monster {transform: skewX(30deg);}');
        });
      });
      return dom.node('.monster').hasSame('transform');
    });
    checker.addGoal('goal2', function (dom) {
      dom.changeEtalon(function () {
        this.reset();
        this.css(function () {
          this.append('.monster {transform: skewX(30deg) skewY(30deg);}');
        });
      });
      return checker.isSolved('goal1') &&
        dom.node('.monster').hasSame('transform');
    });
    checker.addBonusGoal(function (){});
    checker.addPostCheckHandler(function (doc) {
      if (checker.isSolved('goal2')) {
        const worldEl = doc.querySelector('.world');
        const monsterEl = doc.querySelector('.monster');

        const scrollEl = doc.createElement('div');
        scrollEl.classList.add('scroll');

        scrollEl.addEventListener('click', function () {
          checker.bonusGoal.setSolved();

          const mapScrollImageEl = doc.createElement('div');
          mapScrollImageEl.classList.add('scroll-image');
          mapScrollImageEl.innerHTML = '<img src="scroll-map.png"></div>';

          mapScrollImageEl.addEventListener('click', function () {
            worldEl.removeChild(mapScrollImageEl);
          });

          worldEl.appendChild(mapScrollImageEl);
        });

        setTimeout(function () {
          monsterEl.classList.add('fade-hidden');
          monsterEl.insertAdjacentElement('afterend', scrollEl);
        }, 1000);
      }
    });
  });

  this.setAnswers([{
    goal: 1,
    editor: 'css',
    data: {
      tooltip: 'С помощью трансформации <code>skewX</code> наклоним монстра <code>.monster</code> по горизонтали.',
      actions: [{
        action: 'addLine',
        cursorPosition: {
          row: 6,
          column: 2
        },
        to: 'transform: skewX(30deg);'
      }]
    }
  }, {
    goal: 2,
    editor: 'css',
    data: {
      tooltip: 'А затем с помощью <code>skewY</code> по вертикали.',
      actions: [{
        action: 'add',
        cursorPosition: {
          row: 6,
          column: 25
        },
        to: ' skewY(30deg)'
      }]
    }
  }]);
});