videobanner.slim

#container
  h1 Новый формат видеобаннера
  #frame
    a#go
    #strip
      = image_tag 'videobanner/sprites/sprite4_0.jpg'
      = image_tag 'videobanner/sprites/sprite4_1.jpg'
      = image_tag 'videobanner/sprites/sprite4_2.jpg'
      = image_tag 'videobanner/sprites/sprite4_3.jpg'

  h2 вопрос 1
  .q data-question="1" data-value="1" data-valid="" хуй
  .q data-question="1" data-value="2" data-valid="" пизда
  .q data-question="1" data-value="3" data-valid="1" джигурда
  .q data-question="1" data-value="4" data-valid="" говно
  br
  h2 вопрос 2
  .q data-question="2" data-value="1" data-valid="" хуй
  .q data-question="2" data-value="2" data-valid="" пизда
  .q data-question="2" data-value="3" data-valid="1" джигурда
  .q data-question="2" data-value="4" data-valid="" говно
  br
  h2 вопрос 3
  .q data-question="3" data-value="1" data-valid="" хуй
  .q data-question="3" data-value="2" data-valid="" пизда
  .q data-question="3" data-value="3" data-valid="1" джигурда
  .q data-question="3" data-value="4" data-valid="" говно
  br
  h2 вопрос 4
  .q data-last="1" data-question="4" data-value="1" data-valid="" хуй
  .q data-last="1" data-question="4" data-value="2" data-valid="" пизда
  .q data-last="1" data-question="4" data-value="3" data-valid="1" джигурда
  .q data-last="1" data-question="4" data-value="4" data-valid="" говно
  br

  form#questForm action="http://192.168.60.138:3000/gorod/quiz" method="POST"
    input#formData type="hidden" name="data" value=""
    input#formCorrect type="hidden" name="correct" value=""


coffee:
  $ ->
    data = []
    correct = 0
    $form = $('#questForm')
    $('.q').on 'click', ->
      $q = $(this)
      return true if $q.hasClass 'disabled'
      $q.addClass 'selected'
      question = $q.data('question')
      $q.addClass if $q.data('valid') == 1 then 'valid' else 'invalid'
      correct += 1 if $q.data('valid') == 1
      $(".q[data-question=#{question}]").addClass 'disabled'
      title = $q.html()
      title = title.replace(/\s+/g," ")
      title = title.replace(/(\r\n|\n|\r)/gm," ");

      x =
        question: question
        value: $q.data('value')
        title: title
        valid: $q.data('valid') == 1
      data.push x

      if $q.data('last') == 1
        console.log JSON.stringify(data)
        $('#formData').val JSON.stringify(data)
        $('#formCorrect').val(correct)
        $form.submit()


scss:
  .q {
    border: 1px solid #eee;
    margin: 5px 10px;
    width: 100px;
    padding: 5px 10px;
    cursor: pointer;
    background: #333;
    color: #fff;
    font-weight: bold;
    &.disabled {
      background: #eee;
    }
    &.valid {
      background: #090;
    }
    &.invalid {
      background: #900 ;
    }
    &.selected {
      border: 1px solid #333;
    }

  }

scss:
  #container {
    background: #fff;
    width: 800px;
    /*height: 2500px;*/
    margin: 20px auto;
    audio {
      display: none;
    }
    h1 {
      text-align: center;
    }
    #go {
      position: absolute;
      width: 50px;
      height: 50px;
      border-radius: 1000px;
      z-index: 1000;
      top: 50%;
      left: 50%;
      margin: -25px 0 0 -25px;
      background: #900;
      opacity: 0.9;
      &.ready {
        background: #090;
      }
    }
    #frame {
      background: #000;
      margin: 20px auto;
      border: 4px solid #900;
      overflow: hidden;
      width: 450px;
      height: 254px;
      position: relative;
    }
    #strip {
      position: absolute;
      top: 0;
      img {
        width: 100%;
      }

    }
  }

coffee:
  h = 254
  stripPos = 0
  time = 0
  $ ->
    $go = $('#go')
    $audio = $('<audio controls="false">').attr(src: 'http://cdn.vmet.ro/ad_video/avengers/converted.mp3').appendTo $('#container')
    audio = $audio.get(0)
    audio.play()
    audio.pause()
    $strip = $('#strip')
    $('#strip > img').on 'load', ->
      $go.addClass('ready')
    $go.on 'click', ->
      $go.hide()
      audio.play()
      setInterval(->
        $strip.css transform: "translate3d(0,#{stripPos}px,0)"
        stripPos -= h
      ,1000/24)
      setInterval(->
        time += 1
        $strip.css transform: "translate3d(0,#{stripPos}px,0)"
        stripPos = h*24*time*(-1)
      ,1000)