JSFiddle - React, Tailwind, and code Playground

by Avi Algaly

HTML

<div ng-app="mishnaApp">
    <div ng-controller="mainCtrl">
         <h3>{{name}}</h3>

        <p mishna words="m1" answers="answers" mishna-text="mishnaText"></p>
    </div>
</div>

CSS

body {
    direction:rtl;
    font-family:Arial;
    font-size:1.1em;
}
p {
    color:#00c96c;
}
h3 {
    color:#428bca;
}
.answers {
    color:red;
}
}

JavaScript

window.mishnaApp = this.angular.module('mishnaApp', []);

mishnaApp.value("GLOBALS", {
    mishna1: "יציאות השבת שתים שהן ארבע בפנים ושתים שהן ארבע בחוץ כיצד העני עומד בחוץ ובעל הבית בפנים פשט העני את ידו לפנים ונתן לתוך ידו של בעל הבית או שנטל מתוכה והוציא העני חייב ובעל הבית פטור: פשט בעל הבית את ידו לחוץ ונתן לתוך ידו של עני או שנטל מתוכה והכניס בעל הבית חייב והעני פטור: פשט העני את ידו לפנים ונטל בעל הבית מתוכה או שנתן לתוכה והוציא שניהם פטורין פשט בעל הבית את ידו לחוץ ונטל העני מתוכה או שנתן לתוכה והכניס שניהם פטורין:"});

mishnaApp.controller('mainCtrl', function ($scope, GLOBALS) {
    $scope.name = "מסכת שבת";
    $scope.m1 = GLOBALS.mishna1;
    $scope.answers = [];
});

mishnaApp.directive("mishna", [function () {
    return {
        restrict: "EA",
        replace: true,
        scope: {
            words: "=",
            answers: "=",
            mishnaText: "="
        },
        link: function (scope, element, attr) {
            var res = scope.words.split(" ");
            var answersIndex = [];
            for (var i = 0; i < 4; i++) {
                answersIndex.push(Math.floor(Math.random() * res.length + 1));
            }
            scope.answers.push(res.splice(answersIndex[0], 1));
            for (var i = 1; i < 4; i++) {
                scope.answers.push(res[answersIndex[i]]);
            }

            console.log(answersIndex, scope.answers);
            res.splice(answersIndex[0], 1);
            scope.mishnaText = res.join(" ");
        },
        template: '<div><p>{{mishnaText}}</p><ul class="answers"><li ng-repeat="ans in answers track by $index">{{ans.toString()}}</li></ul></div>'
    }
}]);