Commit 8660936a authored by BsmhDev's avatar BsmhDev

add new quiz card

parent e756d69a
......@@ -10,6 +10,7 @@
@import "{}/imports/ui/stylesheets/view-quiz.less";
@import "{}/imports/ui/stylesheets/question.less";
@import "{}/imports/ui/stylesheets/leaders.less";
@import "{}/imports/ui/stylesheets/quiz-card.less";
// @import "{}/imports/ui/stylesheets/answer-count-font.ttf";
......
......@@ -5,13 +5,17 @@ import Game from '/imports/api/games/games';
import Quiz from '/imports/api/quizes/quizes';
import Tag from '/imports/api/tags/tags';
const QuizCard = ({ quiz }) => {
const forkQuiz = () => {
const questions = quiz.questions;
const title = quiz.title;
const tags = quiz.tags;
const newQuiz = new Quiz({ questions, title, tags, owner: Meteor.userId() });
const newQuiz = new Quiz({
questions,
title,
tags,
owner: Meteor.userId(),
});
newQuiz.create();
};
......@@ -25,55 +29,156 @@ const QuizCard = ({ quiz }) => {
FlowRouter.go('Game.Main', { code: game.code });
};
return (
<div className="panel panel-defualt">
<div className="panel-heading">
<img
className="quiz-panel-img"
src="../../img/quiz-default.png"
alt="quiz"
/>
</div>
<div className="panel panel-default quiz-card" id={`quiz-card-${quiz._id}`}>
<div className="panel-body">
<h5 className="quiz-title">{quiz.title}</h5>
<p className="tags-row">
{quiz.user}
</p>
<div className="tags-row">
<ul>
{quiz.tags.map(tag => (
<li key={tag}>
<label className="tags">{Tag.findOne(tag)}</label>
</li>
))}
</ul>
<div className="row">
<div className="col-md-3">
<img
className="quiz-panel-img"
src="../../img/quiz-default.png"
alt="quiz"
/>
</div>
<div className="col-md-4">
<p><h5 className="quiz-title">{quiz.title}</h5></p>
<p>
<span className="quiz-owner-span">
הועלה ע"י {quiz.owner}
</span>
</p>
<p><strong>{quiz.questions.length} </strong><span>שאלות</span></p>
</div>
<div className="col-md-5 quiz-card-buttons-area">
{quiz.owner === Meteor.userId()
? <span>
<div className="col-md-4">
<a
href="javascript:void(0)"
className="delete quiz-card-link"
onClick={deleteQuiz}
>
<span className="glyphicon glyphicon-remove quiz-card-link-text-icon" />
<span className="quiz-card-link-text">מחק שאלון</span>
</a>
</div>
<div className="col-md-4">
<a
href={`/EditQuiz/${quiz._id}`}
className="star quiz-card-link"
>
<span className="glyphicon glyphicon-pencil quiz-card-link-text-icon" />
<span className="quiz-card-link-text quiz-card-link-text">
ערוך שאלון
</span>
</a>
</div>
<div className="col-md-4 quiz-card-start-button-area">
<a
href="javascript:void(0)"
className="btn btn-primary start-game-btn"
onClick={initGame}
>
<span>התחל משחק! </span>
<span className="glyphicon glyphicon-play" />
</a>
</div>
</span>
: <span>
<div className="col-md-6">
<a
href="javascript:void(0)"
className="btn"
onClick={forkQuiz}
>
העתק שאלון
</a>
</div>
<div className="col-md-6">
<a href={`/ViewQuiz/${quiz._id}`} className="btn">
צפה בפרטים
</a>
</div>
</span>}
</div>
</div>
</div>
<div className="panel-footer">
{quiz.owner === Meteor.userId()
? <span>
<a
href="javascript:void(0)"
className="delete"
onClick={deleteQuiz}
>
<i className="glyphicon glyphicon-remove" />
</a>
<a href={`/EditQuiz/${quiz._id}`} className="star">
<span className="glyphicon glyphicon-pencil" />
</a>
<a href="javascript:void(0)" className="btn" onClick={initGame}>
התחל משחק!
</a>
</span>
: <span>
<a href="javascript:void(0)" className="btn" onClick={forkQuiz}>
העתק שאלון
</a>
<a href={`/ViewQuiz/${quiz._id}`} className="btn">צפה בפרטים</a>
</span>}
</div>
</div>
);
};
// const QuizCard = ({ quiz }) => {
// const forkQuiz = () => {
// const questions = quiz.questions;
// const title = quiz.title;
// const tags = quiz.tags;
// const newQuiz = new Quiz({
// questions,
// title,
// tags,
// owner: Meteor.userId(),
// });
// newQuiz.create();
// };
// const deleteQuiz = () => {
// quiz.delete();
// };
// const initGame = () => {
// const game = new Game({ quiz });
// game.applyMethod('initGame', []);
// FlowRouter.go('Game.Main', { code: game.code });
// };
// return (
// <div className="panel panel-defualt">
// <div className="panel-heading">
// <img
// className="quiz-panel-img"
// src="../../img/quiz-default.png"
// alt="quiz"
// />
// </div>
// <div className="panel-body">
// <h5 className="quiz-title">{quiz.title}</h5>
// <p className="tags-row">
// {quiz.user}
// </p>
// <div className="tags-row">
// <ul>
// {quiz.tags.map(tag => (
// <li key={tag}>
// <label className="tags">{Tag.findOne(tag)}</label>
// </li>
// ))}
// </ul>
// </div>
// </div>
// <div className="panel-footer">
// {quiz.owner === Meteor.userId()
// ? <span>
// <a
// href="javascript:void(0)"
// className="delete"
// onClick={deleteQuiz}
// >
// <i className="glyphicon glyphicon-remove" />
// </a>
// <a href={`/EditQuiz/${quiz._id}`} className="star">
// <span className="glyphicon glyphicon-pencil" />
// </a>
// <a href="javascript:void(0)" className="btn" onClick={initGame}>
// התחל משחק!
// </a>
// </span>
// : <span>
// <a href="javascript:void(0)" className="btn" onClick={forkQuiz}>
// העתק שאלון
// </a>
// <a href={`/ViewQuiz/${quiz._id}`} className="btn">צפה בפרטים</a>
// </span>}
// </div>
// </div>
// );
// };
export default QuizCard;
......@@ -78,9 +78,12 @@
font-size: 65px;
}
.question-image {
width: 100%;
height: 300px;
width: 300px;
padding-bottom: 5px;
padding-top: 5px;
margin: auto;
display: block;
}
.padding-top {
padding-top: 100px;
......
.quiz-card {
.quiz-panel-img {
height: 100px;
width: 100px;
display: block;
margin: auto;
}
.quiz-title {
font-size: 26px;
font-weight: 500;
}
.quiz-owner-span {
color: gray;
}
.quiz-card-link-text {
display: block;
text-align: center;
color: #000;
&-icon {
border-radius: 50%;
background-color: #ff851b;
color: #fff;
height: 40px;
width: 40px;
margin: auto;
padding: 12px;
display: block;
text-align: center;
}
}
a.quiz-card-link {
text-decoration: none;
}
.start-game-btn {
background-color: #864cbf;
border-color: #864cbf;
}
@media(min-width:768px){
.quiz-card-buttons-area {
padding-top: 25px;
}
.quiz-card-start-button-area {
padding-top: 8px;
}
}
}
\ No newline at end of file
public/img/quiz-default.png

293 KB | W: | H:

public/img/quiz-default.png

152 KB | W: | H:

public/img/quiz-default.png
public/img/quiz-default.png
public/img/quiz-default.png
public/img/quiz-default.png
  • 2-up
  • Swipe
  • Onion skin
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment