parent
							
								
									5a537d577a
								
							
						
					
					
						commit
						19e62b975b
					
				
				 3 changed files with 129 additions and 3 deletions
			
			
		@ -0,0 +1,78 @@ | 
				
			||||
import React from 'react'; | 
				
			||||
 | 
				
			||||
 | 
				
			||||
 | 
				
			||||
 | 
				
			||||
const Question = () => { | 
				
			||||
 | 
				
			||||
    const data =  { | 
				
			||||
        questionId: 1, | 
				
			||||
        courseId: 2, | 
				
			||||
        title:'آیا به نظر شما این کار کار درستی است؟', 
 | 
				
			||||
        answeredPercentage: '13', | 
				
			||||
        score: 1, | 
				
			||||
        options: [ | 
				
			||||
            { | 
				
			||||
                id: 1, | 
				
			||||
                title:'بله', | 
				
			||||
                isAnswer: false | 
				
			||||
            }, | 
				
			||||
            { | 
				
			||||
                id: 2, | 
				
			||||
                title:'نظر خاصی ندارم', | 
				
			||||
                isAnswer: false | 
				
			||||
            }, | 
				
			||||
            { | 
				
			||||
                id: 3, | 
				
			||||
                title:'خیر', | 
				
			||||
                isAnswer: true | 
				
			||||
            }, | 
				
			||||
            { | 
				
			||||
                id: 4, | 
				
			||||
                title:'هویج و گوجه فرنگی؟', | 
				
			||||
                isAnswer: false | 
				
			||||
            }, | 
				
			||||
        ] 
 | 
				
			||||
    }; | 
				
			||||
    const gozine = [ | 
				
			||||
        'الف', | 
				
			||||
        'ب', | 
				
			||||
        'ج', | 
				
			||||
        'د', | 
				
			||||
        'ه', | 
				
			||||
        'ز', | 
				
			||||
    ] | 
				
			||||
    return( | 
				
			||||
        <div className='w-full flex flex-col justify-between items-center'> | 
				
			||||
            <div className='w-4/5 flex flex-col  bg-white rounded-xl border border-gray-300'> | 
				
			||||
                <div className='w-full border-b border-gray-300 p-4 text-gray-800 text-right'> | 
				
			||||
                    {data.title} | 
				
			||||
                </div> | 
				
			||||
                <div className='w-full p-3 px-4 flex justify-between items-center'> | 
				
			||||
                    <div> | 
				
			||||
                        <p className='text-xs'>نمره : {data.score}</p> | 
				
			||||
                    </div> | 
				
			||||
                    <div className='text-gray-500 text-sm'> | 
				
			||||
                        درصد پاسخگویی: {data.answeredPercentage} | 
				
			||||
                    </div> | 
				
			||||
                </div> | 
				
			||||
            </div> | 
				
			||||
            <div className='w-4/5 justify-center mt-4 flex flex-wrap'> | 
				
			||||
                { | 
				
			||||
                    data.options.map( | 
				
			||||
                        (item) => ( | 
				
			||||
                            <div className='w-2/5 mx-4 my-2 flex items-center justify-center'> | 
				
			||||
                                <p className={` h-12 flex items-center justify-center w-16 rounded-lg rounded-l-none ${item.isAnswer ? 'text-white bg-green-400' : 'bg-gray-200 border border-gray-300'}`}>{gozine[item.id - 1]}</p> | 
				
			||||
                                <p className={` h-12 flex items-center justify-center w-full rounded-lg rounded-r-none ${item.isAnswer ? 'bg-green-200' : 'bg-white border border-gray-300'}`}>{item.title}</p> | 
				
			||||
                            </div> | 
				
			||||
                        ) | 
				
			||||
                    ) | 
				
			||||
                } | 
				
			||||
            </div> | 
				
			||||
        </div> | 
				
			||||
    ) | 
				
			||||
 | 
				
			||||
 | 
				
			||||
} | 
				
			||||
 | 
				
			||||
export default Question; | 
				
			||||
					Loading…
					
					
				
		Reference in new issue