vikings-video

vikings-video.html

<div class="points-wrap pt-toggle-challenge-{{ challenge.id }}">
    <div class="box panel content video">
        <div class="row">
            <div class="title">
                <div class="column small-9 large-9">
                    <h3 class="left">{% widget "title_and_points" "title" %}</h3>
                </div>
                <div class="column small-3 large-3">
                    {% if challenge.params.title.points %}
                    <div class="row">
                        <div class="columns large-6 small-4 text-right">
                             <img src="{{ static_url }}images/success@2x.png" alt="completed" class="success-mark show-on-success">
                         </div>
                         <div class="columns large-6 small-8 text-right">
                            <h3 class="right points-total"><span class="hide-on-success">+</span>{{ challenge.params.title.points }}</h3>
                        </div>
                    </div>
                    {% endif %}
                </div>
            </div>
            <div class="columns large-5 no-pad">
                <a href="#" data-reveal-id="challenge-modal-{{ challenge.id }}">
                    <div class="play">
                        <img src="{{ static_url }}images/play@2x.png" alt="play video">
                    </div>
                    {% widget "image" "thumbnail" %}
                </a>
            </div>
            <div class="columns large-7">
                <p>{% widget "text" "description" %}</p>
            </div>
            <div class="columns large-2 challenge-icon text-right">
                <img src="{{ static_url }}images/icons/watch-vid@2x.png" alt="">
            </div>
        </div>
    </div>
</div>

<div id="challenge-modal-{{ challenge.id }}" class="reveal-modal large">
    <div class="flex-video">
        {% widget "youtube" "video" %}
    </div>
    <a class="close-reveal-modal"><img src="{{ static_url }}images/close@2x.png"></a>
</div>

vikings-video.js

var challengeModalContainer = PT.dom.$("challenge-modal-container"),
    modal = PT.dom.$("challenge-modal-{{ challenge.id }}"),
    toggleName = "pt-toggle-challenge-{{ challenge.id }}",
    ref_id = "pt-challenge-{{ challenge.id }}",
    videoNodeId = "challenge-video-{{ challenge.id }}";
challengeModalContainer.appendChild(modal);

{% if challenge.params.title.points %}
PT.action.activity.register(videoNodeId, ['watch', {points: {{ challenge.params.title.points }}, action_detail: " You watched a video", ref_id: ref_id}], toggleName);
PT.event.bind('youtube.video.ended', function (response) {
	PT.action.activity.call(response);
});
{% endif %}