polymerajax

<link rel="import" href="../../../bower_components/polymer/polymer.html">
<link rel="import" href="../../../bower_components/iron-form/iron-form.html">
<link rel="import" href="../../../bower_components/iron-fit-behavior/iron-fit-behavior.html">
<link rel="import" href="../../../bower_components/paper-input/paper-input.html">
<link rel="import" href="../../../bower_components/iron-label/iron-label.html">
<link rel="import" href="../../../bower_components/paper-button/paper-button.html">
<link rel="import" href="../../../bower_components/marked-element/marked-element.html">
<link rel="import" href="../../../bower_components/paper-toast/paper-toast.html">
<link rel="import" href="../../../bower_components/paper-radio-group/paper-radio-group.html">
<link rel="import" href="../../../bower_components/paper-radio-button/paper-radio-button.html">
<link rel="import" href="../../../bower_components/iron-flex-layout/iron-flex-layout-classes.html">

<!-- you are missing this import -->
<link rel="import" href="../../../bower_components/iron-ajax/iron-ajax.html" />

<dom-module id="generic-question">
    <style is="custom-style" include="iron-flex iron-flex-alignment">
    .outer {
        display: inline-flex;
        flex-wrap: wrap;
        flex-direction: row;
    }

    .correct {
        color: green;
    }

    .wrong {
        color: red;
    }

    .inner {
        display: inline-flex;
        flex-wrap: wrap;
        flex-direction: column;
    }

    .mcq-body {
        padding: 10px;
    }
    </style>

    <template>
    <p>Path: [[path]] or ComputedUrl: [[url]]</p>
        <iron-ajax auto url="[[url]]" handle-as="json" last-response="{{questions}}"></iron-ajax>
        <template is="dom-repeat" items="{{questions}}">
        <div class="outer">
            <div class="inner">
                <div id="mcqbody" class="mcq-body">
                    <div class="question" name="question">{{item.question}}</div>
                    <paper-radio-group id="mcq" class="layout vertical wrap" selected="{{selection}}">
                        <paper-radio-button name="resp1">{{item.reponseB}}</paper-radio-button>
                        <paper-radio-button name="resp2">{{item.reponseF}}</paper-radio-button>
                        <paper-radio-button name="resp3">{{item.reponseM}}</paper-radio-button>
                    </paper-radio-group>
                    <iron-collapse id="correct" opened="{{open1}}">
                        <paper-input class="correct" text="">
                            <iron-icon icon="check-circle" prefix></iron-icon>
                            <div prefix> Correct</div>
                        </paper-input>
                    </iron-collapse>
                    <iron-collapse id="wrong" opened="{{open2}}">
                        <paper-input class="wrong" text="">
                            <iron-icon icon="cancel" prefix></iron-icon>
                            <div prefix> Faux</div>
                        </paper-input>
                    </iron-collapse>
                    <iron-collapse id="wrong" opened="{{open3}}">
                        <paper-input class="wrong" text="">
                            <iron-icon icon="cancel" prefix></iron-icon>
                            <div prefix> Veuillez répondre à la question </div>
                        </paper-input>
                    </iron-collapse>
                    <div style="margin-top:40px" class="card-actions">
                        <paper-button raised on-tap="validate">Validate</paper-button>
                        <paper-button raised on-tap="next">Next</paper-button>
                    </div>
                </div>
            </div>
        </div>
        </template>

    </template>
    <script>
    (function() {
        'use strict';
        Polymer({
            is: 'generic-question',
            validate: function() {
                if (this.selection == "resp1" ) {
                    this.open1 = true;
                    this.open2 = false;
                    this.open3 = false;

                } else {
                    this.open2 = true;
                    this.open1 = false;
                    this.open3 = false;
                }
            },

            next: function() {
                if (this.open1 == true) {
                    this.fire('nextQuestion', true);
                } else {
                    this.open3 = true;
                    this.open2 = false;
                }

            },

            properties: {
                "path": {
                    type: String,
                    value: function() {
                        return 'listQuestions1';
                    }
                },
                "url: {
                    type: String,
                    computed: 'computeUrl(path)'
                },
                "questions": {
                    type: Object
                }
            },
            computeUrl: function(path) {
                return 'questions/' + path + '.json';
            }
        });
    })();
    </script>
</dom-module>