A Pen by Neeilan Selvalingam

Developer
Neeilan Selvalingam
Size
9,533 Kb
Views
26,312
  1. A Pen by Neeilan Selvalingam Previews
  2. A Pen by Neeilan Selvalingam HTML Codes
  3. A Pen by Neeilan Selvalingam JS Codes

How do I make an a pen by neeilan selvalingam?

What is a a pen by neeilan selvalingam? How do you make a a pen by neeilan selvalingam? This script and codes were developed by Neeilan Selvalingam on 13 September 2022, Tuesday.

A Pen by Neeilan Selvalingam Previews
IQ Test

A Pen by Neeilan Selvalingam - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>A Pen by Neeilan Selvalingam</title> <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'>
</head>
<body> <br/>
<br/>
<div class = "container">	<div id="quizApp"/>
</div>
<!-- <link rel="stylesheet" href="https://bootswatch.com/paper/bootstrap.css"> -->
<link rel="stylesheet" href="https://bootswatch.com/yeti/bootstrap.css"> <script src='https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react-dom.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

A Pen by Neeilan Selvalingam - Script Codes JS Codes

'use strict';
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
var enums = {	questionTypes: {	multiSelect: 'multi select',	multipleChoice: 'multiple choice',	shortAnswer: 'short answer'	},	allocateMembers: {	automatically: 'automatically',	selfSelect: 'self-selection'	}
};
var currGroupId = 'g4';
// mock data
var testQuestion = {	id: 1,	question: 'What is your favorite color?',	choices: ['Blue', 'Green', 'Red'],	type: enums.questionTypes.multipleChoice,	number: 2,	attachments: []
};
var testQuestion2 = {	id: 2,	question: 'What are your favorite foods?',	choices: ['Pizza', 'Pie', 'Other'],	type: enums.questionTypes.multiSelect,	number: 3,	attachments: []
};
var testQuestion3 = {	id: 3,	question: 'Enter your favorite prime number',	type: enums.questionTypes.shortAnswer,	number: 4,	attachments: []
};
var testQuestion4 = {	id: 4,	question: 'Pick all the true statements',	choices: ['true != false', 'null === false', 'null == false', 'undefined === false'],	type: enums.questionTypes.multiSelect,	number: '4b',	attachments: []
};
var _quizData = {	groupId: currGroupId,	userId: 'a5',	groupName: '4',	allocateMembers: enums.allocateMembers.automatically,	active: true,	quiz: {	questions: [testQuestion2, testQuestion, testQuestion3, testQuestion4]	}
};
// mock socket io object
var io = function io() {	return {	handlers: {},	on: function on(event, handler) {	this.handlers[event] = handler;	},	emit: function emit(event, data) {	console.log('EMIT: ' + event);	console.log(data);	switch (event) {	case 'requestQuiz':	{	this._emit('quizData', _quizData);	break;	}	case 'groupAttempt':	{	console.log(data);	break;	}	case 'assignSelfAsDriver':	{	this._emit('resetDriver', { groupId: currGroupId });	this._emit('assignedAsDriver', { groupId: currGroupId });	}	}	},	_emit: function _emit(event, data) {	if (event in this.handlers) {	this.handlers[event](data);	}	}	};
};
var QuizApp = function (_React$Component) {	_inherits(QuizApp, _React$Component);	function QuizApp(props) {	_classCallCheck(this, QuizApp);	var _this = _possibleConstructorReturn(this, _React$Component.call(this, props));	_this.setDriverCb = _this.setDriverCb.bind(_this);	_this.awardPointCb = _this.awardPointCb.bind(_this);	_this.submitChoiceCb = _this.submitChoiceCb.bind(_this);	_this.selectQuestionCb = _this.selectQuestionCb.bind(_this);	_this.createGroupCb = _this.createGroupCb.bind(_this);	_this.state = {	score: 0,	quiz: null,	groupId: null,	groupName: null,	userId: null,	isDriver: false,	hasCreatedGroup: false,	selectedQuestion: null,	active: true,	complete: false,	inProgress: false	};	return _this;	}	QuizApp.prototype.componentWillMount = function componentWillMount() {	var _this2 = this;	var url = window.location.href;	var quizId = url.slice(url.indexOf('/quizzes/') + 9, url.indexOf('/start'));	var socket = io();	this.socket = socket;	socket.on('setGroup', function (id) {	console.log('setGroup');	window.location.href = window.location.href;	});	socket.on('groupsUpdated', function (data) {	console.log('groupsUpdated');	// renderGroups(data.groups);	});	socket.on('quizData', function (tutorialQuiz) {	console.log(tutorialQuiz);	_this2.setState({	quiz: tutorialQuiz.quiz,	groupId: tutorialQuiz.groupId || _this2.state.groupId,	userId: tutorialQuiz.userId || _this2.state.userId,	groupName: tutorialQuiz.groupName,	active: tutorialQuiz.active	});	});	socket.on('resetDriver', function (data) {	console.log('resetDriver');	if (_this2.state.groupId != data.groupId) return;	_this2.setState({ isDriver: false, inProgress: true });	});	socket.on('info', function (data) {	swal('', data.message, 'info');	});	socket.on('postQuiz', function (data) {	console.log('postQuiz');	if (!_this2.state.groupId || data.groupId != _this2.state.groupId) return;	});	socket.on('assignedAsDriver', function (data) {	console.log('assignedAsDriver');	if (!_this2.state.groupId || data.groupId != _this2.state.groupId) return;	// enable choices and submit buttons (disabled by default)	_this2.setState({ isDriver: true, inProgress: true });	});	socket.emit('requestQuiz', quizId);	};	QuizApp.prototype.getCurrentQuestion = function getCurrentQuestion() {	if (this.state.selectedQuestion === null) {	if (this.state.quiz && this.state.quiz.questions.length > 0) {	this.setState({ selectedQuestion: this.state.quiz.questions[0] });	} else {	return null;	}	}	console.log(this.state.selectedQuestion);	return React.createElement(Question, {	previouslyAnswered: false,	isDriver: true,	question: this.state.selectedQuestion.question,	questionType: this.state.selectedQuestion.type,	choices: this.state.selectedQuestion.choices,	attachments: this.state.selectedQuestion.attachments,	submitCb: this.submitChoiceCb	});	};	QuizApp.prototype.getScoreBar = function getScoreBar() {	return React.createElement(ScoreBar, {	questions: this.state.quiz.questions,	selectQuestionCb: this.selectQuestionCb,	selectedQuestion: this.state.selectedQuestion });	};	QuizApp.prototype.getPostQuiz = function getPostQuiz() {	if (!this.state.complete) {	return null;	}	return React.createElement(PostQuiz, {	finalScore: 10,	teammates: [{ name: 'Kobe', id: 'KB24' }],	awardPointCb: this.awardPointCb });	};	QuizApp.prototype.getGroupBuilder = function getGroupBuilder() {	if (this.state.quiz.allocateMembers !== enums.allocateMembers.selfSelect) {	return null;	}	return React.createElement(GroupBuilder, {	groups: [{ name: 'G1' }, { name: 'G2' }],	createGroupCb: this.createGroupCb	});	};	QuizApp.prototype.render = function render() {	var scoreIndicator = this.state.inProgress ? React.createElement(	'span',	null,	'Score : ',	this.state.score	) : null;	var starScore = this.state.inProgress ? React.createElement(StarScore, { full: 3, empty: 5 }) : null;	var preQuiz = this.state.inProgress ? null : React.createElement(PreQuiz, { setDriverCb: this.setDriverCb });	var scoreBar = this.state.inProgress ? this.getScoreBar() : null;	var question = this.state.inProgress ? this.getCurrentQuestion() : null;	var postQuiz = this.state.inProgress ? null : this.getPostQuiz();	var groupBuilder = this.state.inProgress ? null : this.getGroupBuilder();	return React.createElement(	'div',	null,	scoreIndicator,	starScore,	preQuiz,	groupBuilder,	scoreBar,	question,	postQuiz	);	};	QuizApp.prototype.setDriverCb = function setDriverCb(selfIsDriver) {	if (selfIsDriver) {	this.socket.emit('assignSelfAsDriver');	} else {	this.setState({ inProgress: true, isDriver: false });	}	};	QuizApp.prototype.createGroupCb = function createGroupCb() {	console.log('creating group');	};	QuizApp.prototype.awardPointCb = function awardPointCb(id) {	alert('Awarded point to ' + id);	};	QuizApp.prototype.submitChoiceCb = function submitChoiceCb(choices) {	this.socket.emit('groupAttempt', choices);	};	QuizApp.prototype.selectQuestionCb = function selectQuestionCb(question) {	this.setState({	selectedQuestion: question	});	};	return QuizApp;
}(React.Component);
var Question = function (_React$Component2) {	_inherits(Question, _React$Component2);	function Question(props) {	_classCallCheck(this, Question);	var _this3 = _possibleConstructorReturn(this, _React$Component2.call(this, props));	_this3.toggleChoiceSelection = _this3.toggleChoiceSelection.bind(_this3);	_this3.state = {	selectedChoices: [],	givenAnswer: null	};	return _this3;	}	Question.prototype.componentWillReceiveProps = function componentWillReceiveProps() {	this.setState({	selectedChoices: [],	givenAnswer: null	});	};	Question.prototype.render = function render() {	return React.createElement(	'div',	{ className: 'col-xs-10 text-center' },	this.props.question,	React.createElement(EmptyLine, null),	this.getAnswerArea(),	React.createElement('br', null),	this.getAttachmentArea(),	React.createElement('br', null),	React.createElement(	'button',	{	disabled: !!this.props.previouslyAnswered || !this.props.isDriver,	onClick: this.props.submitCb.bind(this, this.state.givenAnswer || this.state.selectedChoices),	className: 'btn btn-success col-xs-10 col-xs-offset-1' },	'Submit'	),	React.createElement('br', null)	);	};	Question.prototype.getAnswerArea = function getAnswerArea() {	var _this4 = this;	switch (this.props.questionType) {	case enums.questionTypes.shortAnswer:	{	return React.createElement('input', {	type: 'text',	style: { padding: '10px' },	placeholder: 'Your answer',	onChange: function onChange(e) {	return _this4.setState({ givenAnswer: e.target.value });	} });	}	case enums.questionTypes.multipleChoice:	case enums.questionTypes.multiSelect:	{	return this.props.choices.map(function (choice) {	return React.createElement(	'span',	null,	React.createElement(	'button',	{	disabled: !!_this4.props.previouslyAnswered || !_this4.props.isDriver,	className: 'btn col-xs-10 col-xs-offset-1 ' + (_this4.state.selectedChoices.indexOf(choice) > -1 ? 'btn-primary' : 'btn-default') + ' ',	onClick: _this4.toggleChoiceSelection.bind(_this4, choice) },	choice	),	React.createElement('br', null)	);	});	}	case enums.questionTypes.shortAnswer:	{	return React.createElement(	'span',	null,	React.createElement('input', { type: 'text', onChange: function onChange(e) {	return _this4.setState({ givenAnswer: e.target.value });	} }),	React.createElement('br', null)	);	}	}	};	Question.prototype.getAttachmentArea = function getAttachmentArea() {	if (!this.props.attachments || this.props.attachments.length == 0) {	return;	}	var attachments = [];	this.props.attachments.map(function (at) {	switch (at.type) {}	});	return attachments;	};	Question.prototype.toggleChoiceSelection = function toggleChoiceSelection(choice) {	var index = this.state.selectedChoices.indexOf(choice);	if (index > -1) {	this.setState({	selectedChoices: this.state.selectedChoices.filter(function (ch) {	return ch !== choice;	})	});	} else if (this.props.questionType == enums.questionTypes.multiSelect) {	this.setState({	selectedChoices: this.state.selectedChoices.concat([choice])	});	} else if (this.props.questionType == enums.questionTypes.multipleChoice) {	this.setState({	selectedChoices: [choice]	});	}	};	return Question;
}(React.Component);
var ScoreBar = function (_React$Component3) {	_inherits(ScoreBar, _React$Component3);	function ScoreBar(props) {	_classCallCheck(this, ScoreBar);	return _possibleConstructorReturn(this, _React$Component3.call(this, props));	}	ScoreBar.prototype.render = function render() {	var _this6 = this;	var buttons = this.props.questions.map(function (q) {	return React.createElement(	'span',	null,	React.createElement(	'button',	{	className: 'btn btn-default ' + (_this6.props.selectedQuestion && _this6.props.selectedQuestion.id == q.id ? 'btn-primary' : '') + ' ',	onClick: _this6.props.selectQuestionCb.bind(_this6, q) },	q.number	),	React.createElement('br', null)	);	});	return React.createElement(	'div',	{ className: 'col-xs-2' },	buttons	);	};	return ScoreBar;
}(React.Component);
var StarScore = function (_React$Component4) {	_inherits(StarScore, _React$Component4);	function StarScore(props) {	_classCallCheck(this, StarScore);	return _possibleConstructorReturn(this, _React$Component4.call(this, props));	}	StarScore.prototype.render = function render() {	var stars = [];	for (var i = 0; i < this.props.full; i++) {	stars.push('F');	}for (var i = 0; i < this.props.empty; i++) {	stars.push('E');	}return React.createElement(	'div',	null,	stars.join()	);	};	return StarScore;
}(React.Component);
var GroupSelect = function (_React$Component5) {	_inherits(GroupSelect, _React$Component5);	function GroupSelect(props) {	_classCallCheck(this, GroupSelect);	return _possibleConstructorReturn(this, _React$Component5.call(this, props));	}	GroupSelect.prototype.render = function render() {};	return GroupSelect;
}(React.Component);
var PreQuiz = function (_React$Component6) {	_inherits(PreQuiz, _React$Component6);	function PreQuiz(props) {	_classCallCheck(this, PreQuiz);	var _this9 = _possibleConstructorReturn(this, _React$Component6.call(this, props));	_this9.strings = {	driverBtnClass: 'btn col-md-4 col-sm-10 col-xs-12 col-md-offset-4 col-sm-offset-1'	};	return _this9;	}	PreQuiz.prototype.render = function render() {	return React.createElement(	'div',	{ className: 'row text-center' },	'This quiz requires a member of your group to serve as the driver, who will submit answers.',	React.createElement('br', null),	React.createElement(	'button',	{	onClick: this.props.setDriverCb.bind(this, true),	className: this.strings.driverBtnClass + ' btn-primary' },	'I will be driver'	),	React.createElement('br', null),	React.createElement(	'button',	{ onClick: this.props.setDriverCb.bind(this, false),	className: this.strings.driverBtnClass + ' btn-danger' },	'I will not be the driver'	),	React.createElement('br', null)	);	};	return PreQuiz;
}(React.Component);
var PostQuiz = function (_React$Component7) {	_inherits(PostQuiz, _React$Component7);	function PostQuiz(props) {	_classCallCheck(this, PostQuiz);	var _this10 = _possibleConstructorReturn(this, _React$Component7.call(this, props));	_this10.strings = {	teachingPtMsg: 'If you wish, you can award a teaching point to the member of your group\ who contributed the most during this quiz:'	};	return _this10;	}	PostQuiz.prototype.render = function render() {	var _this11 = this;	var teammateBtns = this.props.teammates.map(function (t) {	return React.createElement(	'button',	{ className: 'btn btn-default', onClick: _this11.props.awardPointCb.bind(_this11, t.id) },	' ',	t.name,	' '	);	});	return React.createElement(	'div',	{ className: 'text-center' },	React.createElement('br', null),	'Your score: ',	this.props.finalScore,	React.createElement('br', null),	this.strings.teachingPtMsg,	React.createElement('br', null),	teammateBtns	);	};	return PostQuiz;
}(React.Component);
var GroupBuilder = function (_React$Component8) {	_inherits(GroupBuilder, _React$Component8);	function GroupBuilder(props) {	_classCallCheck(this, GroupBuilder);	var _this12 = _possibleConstructorReturn(this, _React$Component8.call(this, props));	_this12.strings = {};	_this12.createGroup = _this12.createGroup.bind(_this12);	_this12.joinGroup = _this12.joinGroup.bind(_this12);	var today = new Date(); // consider using timestamp	_this12.key = 'IQCCreatedGroup' + (today.getDay() + today.getFullYear() + today.getMonth()); // must include quiz id here	return _this12;	}	GroupBuilder.prototype.createGroup = function createGroup() {	sessionStorage.setItem(this.key, 'true');	this.props.createGroupCb();	};	GroupBuilder.prototype.joinGroup = function joinGroup(id) {};	GroupBuilder.prototype.render = function render() {	var existingGroups = this.props.groups.map(function (group) {	return React.createElement(	'button',	null,	group.name	);	});	var createGroupBtn = null;	if (sessionStorage.getItem(this.key) === null) {	createGroupBtn = React.createElement(	'button',	null,	'Create a group'	);	}	return React.createElement(	'div',	null,	existingGroups,	createGroupBtn	);	};	return GroupBuilder;
}(React.Component);
var EmptyLine = function (_React$Component9) {	_inherits(EmptyLine, _React$Component9);	function EmptyLine(props) {	_classCallCheck(this, EmptyLine);	return _possibleConstructorReturn(this, _React$Component9.call(this, props));	}	EmptyLine.prototype.render = function render() {	return React.createElement(	'span',	null,	React.createElement('br', null),	React.createElement('br', null)	);	};	return EmptyLine;
}(React.Component);
ReactDOM.render(React.createElement(QuizApp, null), document.getElementById('quizApp'));
A Pen by Neeilan Selvalingam - Script Codes
A Pen by Neeilan Selvalingam - Script Codes
Home Page Home
Developer Neeilan Selvalingam
Username neeilan
Uploaded September 13, 2022
Rating 3
Size 9,533 Kb
Views 26,312
Do you need developer help for A Pen by Neeilan Selvalingam?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Neeilan Selvalingam (neeilan) Script Codes
Name
Milestones
NeeilWiki
Fctest
MinimaxTTT
NeeilWeather
Simon Game
UTSCMap
ResourcesSearch
RecipeBox
GameOfLife
Create amazing blog posts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!